dhre-ui-kit 3.0.2 → 3.2.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.d.ts

@@ -60,6 +60,7 @@ export * from './theme/sizing';
 export * from './theme/padding';
 export * from './theme/stroke';
 export * from './theme/borderRadius';
+export * from './theme/gradients';
 export { default as Avatar } from './components/avatar';
 export * from './components/avatar/Avatar.interface';
 export { default as AppointmentCard } from './components/appointment-card';

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 || {});
 
@@ -425,7 +426,8 @@ const DHRE_DEEP_SPACE_BLUE = {
   200: "#D8DDEA",
   100: "#F5F8FF",
   DSP_900_TRANSPERANT_20: "rgba(0, 10, 40, 0.20)",
-  DSP_900_TRANSPERANT_10: "rgba(0, 10, 40, 0.10)"
+  DSP_900_TRANSPERANT_10: "rgba(0, 10, 40, 0.10)",
+  DSP_900_TRANSPERANT_30: "rgba(0, 10, 40, 0.30)"
 };
 const DHRE_CORE_BLUE = {
   400: "#15214B",
@@ -467,7 +469,8 @@ const DHRE_SUCCESS_GREEN = {
   100: "#C4E3CC",
   50: "#EBF7EE",
   TRANSPARENT_50: "rgba(137, 199, 152, 0.50)",
-  TRANSPARENT_10: "rgba(137, 199, 152, 0.10)"
+  TRANSPARENT_10: "rgba(137, 199, 152, 0.10)",
+  TRANSPARENT_30: "rgba(137, 199, 152, 0.30)"
 };
 const DHRE_ORANGE_WARNING = {
   400: "#A4560E",
@@ -495,6 +498,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 +908,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 +2153,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 +2195,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 +2235,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 +2257,7 @@ const Checkbox = ({
       style: [labelColorStyle, titleStyle],
       onPressIn: onPress
     }
-  )));
+  ))));
 };
 var CheckBox = withThemeProvider(Checkbox);
 
@@ -3292,8 +3375,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 +3486,6 @@ const Toast = React__default["default"].forwardRef(
       {
         style: [
           styles$j.container,
-          { bottom },
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
@@ -3821,6 +3902,13 @@ const OUTLINED_GRADIENT_COLORS = [
 const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
 const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
 const OUTLINED_BORDER_WIDTH = 1;
+const TAG_SUCCESS_GRADIENT_COLORS = [
+  DHRE_DEEP_SPACE_BLUE.DSP_900_TRANSPERANT_30,
+  DHRE_SUCCESS_GREEN.TRANSPARENT_30
+];
+const TAG_SUCCESS_GRADIENT_BASE_COLOR = DHRE_DEEP_SPACE_BLUE[900];
+const TAG_SUCCESS_GRADIENT_START = { x: 0, y: 0 };
+const TAG_SUCCESS_GRADIENT_END = { x: 1, y: 0 };
 
 const styles$f = reactNative.StyleSheet.create({
   container: {
@@ -13637,11 +13725,18 @@ 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;
 exports.NotificationBandge = NotificationBandge;
 exports.OTPInput = OTPInput;
+exports.OUTLINED_BORDER_WIDTH = OUTLINED_BORDER_WIDTH;
+exports.OUTLINED_GRADIENT_COLORS = OUTLINED_GRADIENT_COLORS;
+exports.OUTLINED_GRADIENT_END = OUTLINED_GRADIENT_END;
+exports.OUTLINED_GRADIENT_START = OUTLINED_GRADIENT_START;
 exports.OurOfficesButton = OurOffices;
 exports.PdfView = PdfView;
 exports.PopUp = PopUp;
@@ -13652,6 +13747,10 @@ exports.SingleSelectionTags = TagSingleSelection;
 exports.StarRating = Star;
 exports.Stepper = index$4;
 exports.SwipableList = SwipableList$1;
+exports.TAG_SUCCESS_GRADIENT_BASE_COLOR = TAG_SUCCESS_GRADIENT_BASE_COLOR;
+exports.TAG_SUCCESS_GRADIENT_COLORS = TAG_SUCCESS_GRADIENT_COLORS;
+exports.TAG_SUCCESS_GRADIENT_END = TAG_SUCCESS_GRADIENT_END;
+exports.TAG_SUCCESS_GRADIENT_START = TAG_SUCCESS_GRADIENT_START;
 exports.Tabs = Tabs$1;
 exports.Tags = Tags;
 exports.TextDirectType = TextDirectType;