dhre-ui-kit 3.0.2 → 3.1.0

package/lib/components/checkBox/CheckBox.interface.d.ts

@@ -3,6 +3,8 @@ export interface CheckBoxProps {
     isChecked: boolean;
     onCheck?: (checked: boolean) => void;
     labelName: string;
+    /** Icon rendered to the left of the label text. Optional — when omitted no icon is rendered. */
+    labelIcon?: React.ReactElement;
     disable?: boolean;
     isCircle?: boolean;
     testID?: string;
@@ -17,6 +19,7 @@ export interface CheckBoxProps {
     titleStyle?: TextStyle;
     containerStyle?: ViewStyle;
     checkboxStyle?: StyleProp<ViewStyle>;
+    checkBoxHeaderStyle?: StyleProp<ViewStyle>;
     onPress?: () => void;
     hideCheckbox?: boolean;
     /**

package/lib/components/checkBox/CheckBox.styles.d.ts

@@ -11,5 +11,10 @@ declare const styles: {
         borderWidth: number;
         overflow: "hidden";
     };
+    labelContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
 };
 export default styles;

package/lib/components/toast/Toast.styles.d.ts

@@ -7,7 +7,6 @@ declare const styles: {
         borderRadius: number;
         overflow: "hidden";
         minHeight: number;
-        height: number;
     };
     toastContainer: {
         paddingVertical: number;

package/lib/index.js

@@ -224,6 +224,7 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["STROKE_DISABLED_DARK2"] = "STROKE_DISABLED_DARK2";
   Theme2["STROKE_ACTIVE"] = "STROKE_ACTIVE";
   Theme2["STROKE_DISABLED_SELECTED"] = "STROKE_DISABLED_SELECTED";
+  Theme2["SHADOW_10"] = "SHADOW_10";
   return Theme2;
 })(Theme || {});
 
@@ -495,6 +496,70 @@ const DHRE_CONFIRMATION_BASE_GRADIENT = {
   light: ["rgba(165, 233, 255, 0)", "#52C5E8"],
   dark: ["rgba(165, 233, 255, 0)", "#279DC1"]
 };
+const GRADIENT_COLORS_SUCCESS = {
+  light: [
+    "#89C798",
+    "#FFFFFF",
+    "#A5E9FF",
+    "#52C5E8",
+    "#0B214A",
+    "#355D7A"
+  ],
+  // NEED TO UPDATE GRADIENT COLORS
+  dark: [
+    "#24584B",
+    "#123D46",
+    "#00113A",
+    "#000A28",
+    "#0B214A",
+    "#355D7A"
+  ]
+};
+const GRADIENT_COLORS_ERROR = {
+  light: [
+    "#F0809E",
+    "#FFFFFF",
+    "#A5E9FF",
+    "#52C5E8",
+    "#0B214A",
+    "#355D7A"
+  ],
+  // NEED TO UPDATE GRADIENT COLORS
+  dark: [
+    "#EB0542",
+    // 0%
+    "#780835",
+    // ~2% 
+    "#00113A",
+    // 28%
+    "#000A28",
+    // 45%    
+    "#0B214A",
+    // 88%
+    "#355D7A"
+    // 100%
+  ]
+};
+const GRADIENT_COLORS_PENDING = {
+  light: ["#E9F8FF", "#52C5E8"],
+  // NEED TO UPDATE GRADIENT COLORS
+  dark: [
+    "#EB0542",
+    // 0%
+    "#780835",
+    // ~2% 
+    "#00113A",
+    // 28%
+    "#000A28",
+    // 45%
+    "#000A28",
+    // 72%
+    "#0B214A",
+    // 88%
+    "#355D7A"
+    // 100%
+  ]
+};
 
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
@@ -841,6 +906,10 @@ const theme = {
   [Theme.STROKE_DISABLED_SELECTED]: {
     dark: "#003f48",
     light: "#9ADFE8"
+  },
+  [Theme.SHADOW_10]: {
+    dark: "rgba(255, 255, 255, 0.20)",
+    light: "rgba(0, 0, 0, 0.10)"
   }
 };
 
@@ -2082,6 +2151,11 @@ const styles$u = reactNative.StyleSheet.create({
     borderRadius: DHRE_RADIUS.SM,
     borderWidth: 1,
     overflow: "hidden"
+  },
+  labelContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: DHRE_PADDING.SM
   }
 });
 
@@ -2119,9 +2193,11 @@ const Checkbox = ({
   titleVariant,
   titleStyle,
   containerStyle,
+  checkBoxHeaderStyle,
   checkboxStyle,
   onPress,
-  hideCheckbox = false
+  hideCheckbox = false,
+  labelIcon
 }) => {
   const { theme } = useTheme();
   const [checked, setChecked] = React.useState(isChecked || false);
@@ -2157,16 +2233,21 @@ const Checkbox = ({
     borderColor: disable ? theme[Theme.CONTENT_DISABLE_DARK] : theme[Theme.STROKE_ACTIVE],
     borderWidth: disable && isFilledState ? 0 : 1
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: containerStyle }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: containerStyle }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$u.directionStyle, checkBoxHeaderStyle] }, hideCheckbox ? null : /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Checkbox-Press",
       onPressIn: handlePress,
       disabled: disable,
-      style: [styles$u.checkboxContainer, iconContainerSizeStyle, checkboxContainerDynamicStyle, checkboxStyle]
+      style: [
+        styles$u.checkboxContainer,
+        iconContainerSizeStyle,
+        checkboxContainerDynamicStyle,
+        checkboxStyle
+      ]
     },
     resolvedIcon ? React__default["default"].cloneElement(resolvedIcon) : null
-  ), /* @__PURE__ */ React__default["default"].createElement(
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.labelContainer }, labelIcon && React__default["default"].cloneElement(labelIcon, { width: 20, height: 20 }), /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: resolvedVariant,
@@ -2174,7 +2255,7 @@ const Checkbox = ({
       style: [labelColorStyle, titleStyle],
       onPressIn: onPress
     }
-  )));
+  ))));
 };
 var CheckBox = withThemeProvider(Checkbox);
 
@@ -3292,8 +3373,7 @@ const styles$j = reactNative.StyleSheet.create({
     top: DHRE_SPACING.XXL,
     borderRadius: DHRE_RADIUS.MD,
     overflow: "hidden",
-    minHeight: DHRE_SPACING.XXL,
-    height: DHRE_SPACING.XXL
+    minHeight: DHRE_SPACING.XXL
   },
   toastContainer: {
     paddingVertical: DHRE_PADDING.LG,
@@ -3404,7 +3484,6 @@ const Toast = React__default["default"].forwardRef(
       {
         style: [
           styles$j.container,
-          { bottom },
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
@@ -13637,6 +13716,9 @@ exports.FONT_STYLES = FONT_STYLES;
 exports.FeedbackForm = feedback;
 exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
+exports.GRADIENT_COLORS_ERROR = GRADIENT_COLORS_ERROR;
+exports.GRADIENT_COLORS_PENDING = GRADIENT_COLORS_PENDING;
+exports.GRADIENT_COLORS_SUCCESS = GRADIENT_COLORS_SUCCESS;
 exports.Line = Line;
 exports.Loader = Loader$1;
 exports.NAKHEEL_DEFAULT = NAKHEEL_DEFAULT;