dhre-ui-kit 3.1.0 → 3.3.0

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

@@ -225,6 +225,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 || {});
 
@@ -426,7 +427,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",
@@ -468,7 +470,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",
@@ -910,6 +913,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
   }
 };
 
@@ -3900,6 +3909,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: {
@@ -11904,19 +11920,32 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Text,
+    return /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.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__default["default"].createElement(
+        reactNative.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__default["default"].createElement(reactNative.View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
     reactNativeElementDropdown.Dropdown,
@@ -11969,7 +11998,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
       ],
@@ -12030,8 +12065,10 @@ const styles$6 = reactNative.StyleSheet.create({
     maxHeight: verticalScale(150)
   },
   itemContainer: {
+    minHeight: verticalScale(48),
     paddingVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(12)
+    paddingHorizontal: horizontalScale(16),
+    justifyContent: "center"
   },
   itemText: {},
   helperText: {
@@ -13724,6 +13761,10 @@ 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;
@@ -13734,6 +13775,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;