dhre-ui-kit 0.0.147 → 0.0.150

package/lib/index.mjs

@@ -2738,31 +2738,33 @@ const DateRangePicker = (props) => {
   const getMarkedDates = () => {
     const { startDate, endDate } = selectedRange;
     const markedDates = {};
+    if (startDate && endDate) {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      while (start < end) {
+        start.setDate(start.getDate() + 1);
+        markedDates[start.toISOString().split("T")[0]] = {
+          color: theme.SUCCESS,
+          textColor: theme.CONTENT_PRIMARY
+        };
+      }
+    }
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
         color: theme.SUCCESS,
-        textColor: theme.CONTENT_PRIMARY
+        textColor: theme.CONTENT_PRIMARY,
+        customContainerStyle: { backgroundColor: theme.SURFACE_INVERTED }
       };
     }
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
         color: theme.SUCCESS,
-        textColor: theme.CONTENT_PRIMARY
+        textColor: theme.CONTENT_PRIMARY,
+        customContainerStyle: { backgroundColor: theme.SURFACE_INVERTED }
       };
     }
-    if (startDate && endDate) {
-      const start = new Date(startDate);
-      const end = new Date(endDate);
-      while (start < end) {
-        start.setDate(start.getDate() + 1);
-        markedDates[start.toISOString().split("T")[0]] = {
-          color: theme.SUCCESS,
-          textColor: theme.CONTENT_PRIMARY
-        };
-      }
-    }
     return markedDates;
   };
   const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
@@ -2780,10 +2782,12 @@ const DateRangePicker = (props) => {
         todayTextColor: theme.SUCCESS
       },
       style: {
-        backgroundColor: "transparent",
-        color: theme.CONTENT_SECONDRY
+        backgroundColor: theme.SURFACE_TERTIARY,
+        color: theme.CONTENT_SECONDRY,
+        borderRadius: 24
       },
       onDayPress,
+      firstDay: 1,
       ...props
     }
   ), /* @__PURE__ */ React.createElement(
@@ -3232,7 +3236,9 @@ const CommonTextInput = ({
   textColor = theme.CONTENT_PRIMARY["light"],
   labelColor,
   handlePress,
-  pointerEvents
+  pointerEvents,
+  multiline = false
+  // Default multiline to false
 }) => {
   return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React.createElement(
     TextInput$1,
@@ -3252,12 +3258,19 @@ const CommonTextInput = ({
           primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK
         }
       },
-      style: [errorMessage ? styles$8.errorInput : styles$8.input, inputStyle],
+      style: [
+        errorMessage ? styles$8.errorInput : styles$8.input,
+        inputStyle,
+        multiline && styles$8.multilineInput
+        // Apply multiline style if true
+      ],
       maxLength,
       textColor,
       placeholder: placeholderText,
       editable,
-      pointerEvents
+      pointerEvents,
+      multiline,
+      numberOfLines: multiline ? 4 : 1
     }
   ), errorMessage ? /* @__PURE__ */ React.createElement(
     CustomTypography,
@@ -3275,9 +3288,6 @@ const styles$8 = StyleSheet.create({
   container: {
     justifyContent: "center"
   },
-  touchable: {
-    width: "100%"
-  },
   input: {
     marginVertical: verticalScale(8),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
@@ -3292,6 +3302,11 @@ const styles$8 = StyleSheet.create({
     height: verticalScale(48),
     justifyContent: "center"
   },
+  multilineInput: {
+    minHeight: verticalScale(100),
+    // Increased height for multiline
+    paddingVertical: verticalScale(8)
+  },
   outlineStyle: {
     borderWidth: 1,
     height: verticalScale(48),
@@ -4053,7 +4068,7 @@ const styles$2 = StyleSheet.create({
     borderRadius: moderateScale(20),
     margin: moderateScale(4)
   },
-  buttonTextCOntainer: {
+  buttonTextContainer: {
     position: "absolute",
     left: 0,
     right: 0,
@@ -4069,6 +4084,9 @@ const CustomSlideButton = ({
   label,
   onComplete,
   icon,
+  textStyle,
+  containerStyle,
+  sliderStyle,
   size = BUTTON_WIDTH
 }) => {
   const value = useRef(0);
@@ -4115,14 +4133,17 @@ const CustomSlideButton = ({
   const { theme } = useTheme();
   return /* @__PURE__ */ React.createElement(View, { style: {
     ...styles$2.sliderContainer,
-    backgroundColor: theme.SURFACE_INVERTED
-  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextCOntainer }, /* @__PURE__ */ React.createElement(
+    backgroundColor: theme.SURFACE_INVERTED,
+    ...containerStyle
+  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       text: label,
       variant: FontStyle.L1_REGULAR,
       style: {
-        color: theme.CONTENT_INVERTED
+        color: theme.CONTENT_INVERTED,
+        alignSelf: "center",
+        ...textStyle
       }
     }
   )), /* @__PURE__ */ React.createElement(
@@ -4139,7 +4160,8 @@ const CustomSlideButton = ({
           backgroundColor: theme.SURFACE_PRIMARY,
           width: verticalScale(size),
           height: verticalScale(size),
-          borderRadius: verticalScale(size / 2)
+          borderRadius: verticalScale(size / 2),
+          ...sliderStyle
         }
       },
       icon