dhre-ui-kit 3.1.0 → 3.3.0

package/lib/index.mjs

@@ -189,6 +189,7 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["STROKE_ACTIVE"] = "STROKE_ACTIVE";
   Theme2["STROKE_DISABLED_SELECTED"] = "STROKE_DISABLED_SELECTED";
   Theme2["SHADOW_10"] = "SHADOW_10";
+  Theme2["SHADOW_SOFT_LIGHTEST"] = "SHADOW_SOFT_LIGHTEST";
   return Theme2;
 })(Theme || {});
 
@@ -390,7 +391,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",
@@ -432,7 +434,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",
@@ -874,6 +877,12 @@ const theme = {
   [Theme.SHADOW_10]: {
     dark: "rgba(255, 255, 255, 0.20)",
     light: "rgba(0, 0, 0, 0.10)"
+  },
+  // Figma: effects/dh-shadow/5, "Shadow/Soft/Lightest" (dropdown/menu surfaces).
+  [Theme.SHADOW_SOFT_LIGHTEST]: {
+    dark: "rgba(255, 255, 255, 0.05)",
+    light: "rgba(0, 10, 40, 0.05)"
+    // light-theme value pending DHDS Figma spec
   }
 };
 
@@ -3864,6 +3873,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: {
@@ -11868,19 +11884,32 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React.createElement(View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
-      Text,
+    return /* @__PURE__ */ React.createElement(
+      View,
       {
         style: [
-          styles$6.itemText,
-          FONT_STYLES[FontStyle.BODY2_LIGHT],
-          { color: theme.CONTENT_PRIMARY },
-          itemTextStyle,
-          isSelected && selectedItemTextStyle
+          styles$6.itemContainer,
+          isSelected && {
+            backgroundColor: theme.SURFACE_INVERTED,
+            borderRadius: DHRE_RADIUS_BASE.RADIUS_8
+          },
+          itemContainerStyle
         ]
       },
-      item[labelField]
-    ));
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles$6.itemText,
+            FONT_STYLES[FontStyle.BODY1_MEDIUM],
+            { color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY },
+            itemTextStyle,
+            isSelected && selectedItemTextStyle
+          ]
+        },
+        item[labelField]
+      )
+    );
   };
   return /* @__PURE__ */ React.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
@@ -11933,7 +11962,13 @@ const CustomDropdown = (props) => {
           backgroundColor: theme.SURFACE_SECONDARY,
           borderColor: theme.STROKE_TERTIARY,
           borderWidth: 1,
-          borderRadius: DHRE_RADIUS_BASE.RADIUS_8
+          borderRadius: DHRE_RADIUS_BASE.RADIUS_8,
+          padding: DHRE_PADDING_BASE.PADDING_16,
+          shadowColor: theme.SHADOW_SOFT_LIGHTEST,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 1,
+          shadowRadius: 10,
+          elevation: 4
         },
         menuContainerStyle
       ],
@@ -11994,8 +12029,10 @@ const styles$6 = StyleSheet.create({
     maxHeight: verticalScale(150)
   },
   itemContainer: {
+    minHeight: verticalScale(48),
     paddingVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(12)
+    paddingHorizontal: horizontalScale(16),
+    justifyContent: "center"
   },
   itemText: {},
   helperText: {
@@ -13619,5 +13656,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, GRADIENT_COLORS_ERROR, GRADIENT_COLORS_PENDING, GRADIENT_COLORS_SUCCESS, 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