dhre-ui-kit 3.5.0 → 3.7.0

package/lib/components/customDocumentPicker/CustomDocumentPicker.styles.d.ts

@@ -0,0 +1,30 @@
+declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderStyle: "dashed";
+        borderRadius: number;
+        marginBottom: number;
+    };
+    fileUploadContainerStyle: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        marginBottom: number;
+    };
+    innerContainer: {
+        flexDirection: "row";
+        columnGap: number;
+    };
+    titleContainer: {
+        gap: number;
+    };
+};
+export default styles;

package/lib/components/textInput/Textinput.d.ts

@@ -21,6 +21,8 @@ interface CommonTextInputProps extends BaseTextInputProps {
     disableBorder?: boolean;
     /** Force RTL layout. When omitted, auto-detected from the label/value text. */
     forceRTL?: boolean;
+    /** Overrides the computed outline/border color (error/disabled/focused/filled logic). */
+    borderColor?: string;
 }
 declare const _default: (props: CommonTextInputProps) => React.JSX.Element;
 export default _default;

package/lib/index.js

@@ -2013,7 +2013,7 @@ function buildPlainContainerStyle(variant, disabled, disabledColor, theme) {
   }
   if (variant === "quaternary") {
     return {
-      backgroundColor: "transparent",
+      backgroundColor: theme[Theme.BUTTON_INVRTED_FILL],
       borderWidth: 1,
       borderColor: disabled ? theme[Theme.BUTTON_QUATERNARY_DISABLED_STROKE] : theme[Theme.BUTTON_QUATERNARY_DEFAULT_STROKE]
     };
@@ -3813,7 +3813,7 @@ const CustomHeader = ({
     {
       variant: "BODY1_MEDIUM",
       text: title,
-      style: { color: titleColor ?? theme.CONTENT_PRIMARY["dark"] }
+      style: { color: titleColor ?? theme.CONTENT_PRIMARY }
     }
   ), titleSuffixIcon && React__default["default"].cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
@@ -10979,15 +10979,15 @@ const DateRangePicker = (props) => {
       while (start < end) {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
-          color: theme.SURFACE_PRIMARY_TRANSPARENT,
-          textColor: theme.CONTENT_PRIMARY
+          color: theme.SURFACE_SECONDARY_TRANSPARENT,
+          textColor: theme.CONTENT_INVERTED
         };
       }
     }
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        textColor: theme.CONTENT_PRIMARY,
+        textColor: theme.CONTENT_INVERTED,
         customContainerStyle: {
           backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
@@ -11001,8 +11001,8 @@ const DateRangePicker = (props) => {
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
-        color: theme.SURFACE_PRIMARY_TRANSPARENT,
-        textColor: theme.CONTENT_PRIMARY,
+        color: theme.SURFACE_SECONDARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
         customContainerStyle: {
           backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
@@ -11014,8 +11014,8 @@ const DateRangePicker = (props) => {
       };
       markedDates[startDate] = {
         startingDay: true,
-        color: theme.SURFACE_PRIMARY_TRANSPARENT,
-        textColor: theme.CONTENT_PRIMARY,
+        color: theme.SURFACE_SECONDARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
         customContainerStyle: {
           backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
@@ -11034,10 +11034,10 @@ const DateRangePicker = (props) => {
     {
       style: [
         styles$b.calendarHeader,
-        { borderBottomColor: theme.STROKE_TERTIARY }
+        { borderBottomColor: theme.STROKE_SECONDARY }
       ]
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$b.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$b.monthText, { color: theme.CONTENT_INVERTED }] }, monthLabel),
     /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.arrowsContainer }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TouchableOpacity,
       {
@@ -11048,7 +11048,7 @@ const DateRangePicker = (props) => {
         Svg.Path,
         {
           d: "M15 19.5L7.5 12L15 4.5",
-          stroke: theme.CONTENT_PRIMARY,
+          stroke: theme.CONTENT_INVERTED,
           strokeWidth: 1.5,
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -11064,7 +11064,7 @@ const DateRangePicker = (props) => {
         Svg.Path,
         {
           d: "M6.75 3.375L12.375 9L6.75 14.625",
-          stroke: theme.CONTENT_PRIMARY,
+          stroke: theme.CONTENT_INVERTED,
           strokeWidth: 1.5,
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -11075,7 +11075,10 @@ const DateRangePicker = (props) => {
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      style: [styles$b.calendarCard, { backgroundColor: theme.SURFACE_PRIMARY }]
+      style: [
+        styles$b.calendarCard,
+        { backgroundColor: theme.SURFACE_INVERTED }
+      ]
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNativeCalendars.Calendar,
@@ -11088,9 +11091,9 @@ const DateRangePicker = (props) => {
         renderHeader: renderCalendarHeader,
         theme: {
           calendarBackground: "transparent",
-          dayTextColor: theme.CONTENT_PRIMARY,
+          dayTextColor: theme.CONTENT_INVERTED,
           textDisabledColor: theme.CONTENT_DISABLE_DARK,
-          todayTextColor: theme.CONTENT_PRIMARY,
+          todayTextColor: theme.CONTENT_INVERTED,
           todayBackgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           textSectionTitleColor: theme.CONTENT_DISABLE_LIGHT,
           textDayFontSize: 16,
@@ -11144,11 +11147,12 @@ const DateRangePicker = (props) => {
   ), /* @__PURE__ */ React__default["default"].createElement(
     Button,
     {
+      containerStyle: styles$b.applyButton,
       title: btnTitle,
       onPress: () => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
-      variant: "primary",
+      variant: "tertiary",
       size: "large",
       disabled: isButtonDisabled
     }
@@ -11776,7 +11780,8 @@ const CommonTextInput = (props) => {
     onRightIconPress,
     onlyErrorBorderLabel,
     disableBorder = false,
-    forceRTL
+    forceRTL,
+    borderColor: borderColorOverride
   } = props;
   const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
@@ -11785,7 +11790,7 @@ const CommonTextInput = (props) => {
   const isDisabled = !editable;
   const isError = !!(errorMessage?.length || onlyErrorBorderLabel);
   const hasValue = !!value?.length;
-  const currentBorderColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.STROKE_TERTIARY] : isFocused || hasValue && !disableBorder ? theme[Theme.STROKE_ACTIVE] : theme[Theme.STROKE_SECONDARY];
+  const currentBorderColor = borderColorOverride ?? (isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.STROKE_TERTIARY] : isFocused || hasValue && !disableBorder ? theme[Theme.STROKE_ACTIVE] : theme[Theme.STROKE_SECONDARY]);
   const borderWidth = isFocused && !isDisabled ? 2 : 1;
   const inputTextColor = isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const placeholderColor = theme[Theme.CONTENT_SECONDRY];