dhre-ui-kit 3.0.2 → 3.2.0

package/lib/index.mjs

@@ -188,6 +188,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 || {});
 
@@ -389,7 +390,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",
@@ -431,7 +433,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",
@@ -459,6 +462,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]: {
@@ -805,6 +872,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)"
   }
 };
 
@@ -2046,6 +2117,11 @@ const styles$u = StyleSheet.create({
     borderRadius: DHRE_RADIUS.SM,
     borderWidth: 1,
     overflow: "hidden"
+  },
+  labelContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: DHRE_PADDING.SM
   }
 });
 
@@ -2083,9 +2159,11 @@ const Checkbox = ({
   titleVariant,
   titleStyle,
   containerStyle,
+  checkBoxHeaderStyle,
   checkboxStyle,
   onPress,
-  hideCheckbox = false
+  hideCheckbox = false,
+  labelIcon
 }) => {
   const { theme } = useTheme();
   const [checked, setChecked] = useState(isChecked || false);
@@ -2121,16 +2199,21 @@ const Checkbox = ({
     borderColor: disable ? theme[Theme.CONTENT_DISABLE_DARK] : theme[Theme.STROKE_ACTIVE],
     borderWidth: disable && isFilledState ? 0 : 1
   };
-  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(View, { style: styles$u.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(View, { style: [styles$u.directionStyle, checkBoxHeaderStyle] }, hideCheckbox ? null : /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Checkbox-Press",
       onPressIn: handlePress,
       disabled: disable,
-      style: [styles$u.checkboxContainer, iconContainerSizeStyle, checkboxContainerDynamicStyle, checkboxStyle]
+      style: [
+        styles$u.checkboxContainer,
+        iconContainerSizeStyle,
+        checkboxContainerDynamicStyle,
+        checkboxStyle
+      ]
     },
     resolvedIcon ? React.cloneElement(resolvedIcon) : null
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(View, { style: styles$u.labelContainer }, labelIcon && React.cloneElement(labelIcon, { width: 20, height: 20 }), /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: resolvedVariant,
@@ -2138,7 +2221,7 @@ const Checkbox = ({
       style: [labelColorStyle, titleStyle],
       onPressIn: onPress
     }
-  )));
+  ))));
 };
 var CheckBox = withThemeProvider(Checkbox);
 
@@ -3256,8 +3339,7 @@ const styles$j = 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,
@@ -3368,7 +3450,6 @@ const Toast = React.forwardRef(
       {
         style: [
           styles$j.container,
-          { bottom },
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
@@ -3785,6 +3866,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 = StyleSheet.create({
   container: {
@@ -13540,5 +13628,5 @@ const RadioButtonGroup = ({
 };
 var index = withThemeProvider(RadioButtonGroup);
 
-export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$2 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$3 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index$1 as PropertyDetails, index as RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$4 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$2 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$3 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, GRADIENT_COLORS_ERROR, GRADIENT_COLORS_PENDING, GRADIENT_COLORS_SUCCESS, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OUTLINED_BORDER_WIDTH, OUTLINED_GRADIENT_COLORS, OUTLINED_GRADIENT_END, OUTLINED_GRADIENT_START, OurOffices as OurOfficesButton, PdfView, PopUp, index$1 as PropertyDetails, index as RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$4 as Stepper, SwipableList$1 as SwipableList, TAG_SUCCESS_GRADIENT_BASE_COLOR, TAG_SUCCESS_GRADIENT_COLORS, TAG_SUCCESS_GRADIENT_END, TAG_SUCCESS_GRADIENT_START, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map