@ecohouse/ui 0.1.54 → 0.1.55

package/dist/index.cjs

@@ -28541,9 +28541,10 @@ var colors = {
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
   whiteAlpha1: "#FFFFFF03",
+  whiteAlpha5: "#FFFFFF0D",
   whiteAlpha6: "#FFFFFF0F",
+  whiteAlpha7: "#FFFFFF12",
   whiteAlpha10: "#FFFFFF1A",
-  whiteAlpha5: "#FFFFFF0D",
   dark: "#090909",
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
@@ -31301,10 +31302,19 @@ function BrandLogo({
   );
 }
 var IMAGE_SIZE = 48;
+var CONTAINER_HEIGHT = 56;
 var CONTAINER_RADIUS = 71;
 var CHEVRON_SIZE = 20;
 var FALLBACK_ICON_SIZE = 20;
 var MENU_RADIUS = 16;
+var triggerWebBlurStyle = reactNative.Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
+var menuWebBlurStyle = reactNative.Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
 var Avatar = react.forwardRef(function Avatar2({
   name,
   email,
@@ -31312,6 +31322,7 @@ var Avatar = react.forwardRef(function Avatar2({
   onPress,
   disabled = false,
   showChevron = true,
+  variant = "light",
   menuItems,
   open: openProp,
   defaultOpen = false,
@@ -31333,6 +31344,7 @@ var Avatar = react.forwardRef(function Avatar2({
   const isOpenControlled = typeof openProp === "boolean";
   const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
   const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
+  const isLightVariant = variant === "light";
   useApplyWebClassName(containerRef, className);
   const setOpen = react.useCallback(
     (next) => {
@@ -31402,7 +31414,13 @@ var Avatar = react.forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles6.root, disabled && styles6.disabled, style],
+        style: [
+          styles6.root,
+          isLightVariant ? styles6.rootLight : styles6.rootDark,
+          isLightVariant && triggerWebBlurStyle,
+          disabled && styles6.disabled,
+          style
+        ],
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.imageWrap, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Image,
@@ -31411,30 +31429,71 @@ var Avatar = react.forwardRef(function Avatar2({
               style: styles6.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.imageFallback, children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [
+                styles6.imageFallback,
+                isLightVariant ? styles6.imageFallbackLight : styles6.imageFallbackDark
+              ],
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                UserIcon,
+                {
+                  size: FALLBACK_ICON_SIZE,
+                  color: isLightVariant ? colors.white : colors.primary
+                }
+              )
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.email, numberOfLines: 1, children: email }) : null
+            email ? /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Text,
+              {
+                style: [styles6.email, isLightVariant ? styles6.emailLight : styles6.emailDark],
+                numberOfLines: 1,
+                children: email
+              }
+            ) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDownIcon,
+            {
+              size: CHEVRON_SIZE,
+              color: isLightVariant ? colors.white : isOpen ? colors.primary : colors.grey100
+            }
+          ) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
-      const itemKey = item.key ?? item.label;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        MenuItem,
-        {
-          icon: item.icon,
-          label: item.label,
-          disabled: item.disabled,
-          backgroundColor: item.backgroundColor,
-          hoverColor: item.hoverColor,
-          onPress: () => handleItemPress(item)
-        },
-        itemKey
-      );
-    }) }) : null
+    hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: [
+          styles6.menu,
+          isLightVariant ? styles6.menuLight : styles6.menuDark,
+          isLightVariant && menuWebBlurStyle,
+          menuWidth != null && { right: void 0, width: menuWidth }
+        ],
+        children: resolvedMenuItems.map((item) => {
+          const itemKey = item.key ?? item.label;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: item.icon,
+              label: item.label,
+              disabled: item.disabled,
+              backgroundColor: item.backgroundColor,
+              hoverColor: item.hoverColor ?? (isLightVariant ? colors.whiteAlpha7 : void 0),
+              labelStyle: item.labelStyle,
+              onPress: () => handleItemPress(item),
+              style: isLightVariant ? item.backgroundColor ? styles6.emphasizedMenuItem : styles6.menuItem : void 0
+            },
+            itemKey
+          );
+        })
+      }
+    ) : null
   ] });
 });
 var styles6 = reactNative.StyleSheet.create({
@@ -31446,6 +31505,7 @@ var styles6 = reactNative.StyleSheet.create({
     zIndex: 20
   },
   root: {
+    height: CONTAINER_HEIGHT,
     flexDirection: "row",
     alignItems: "center",
     alignSelf: "flex-start",
@@ -31454,7 +31514,12 @@ var styles6 = reactNative.StyleSheet.create({
     paddingBottom: 4,
     paddingLeft: 4,
     paddingRight: 12,
-    borderRadius: CONTAINER_RADIUS,
+    borderRadius: CONTAINER_RADIUS
+  },
+  rootLight: {
+    backgroundColor: colors.whiteAlpha5
+  },
+  rootDark: {
     backgroundColor: colors.grey700
   },
   disabled: {
@@ -31475,7 +31540,15 @@ var styles6 = reactNative.StyleSheet.create({
     width: IMAGE_SIZE,
     height: IMAGE_SIZE,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
+  },
+  imageFallbackLight: {
+    borderRadius: IMAGE_SIZE / 2,
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10
+  },
+  imageFallbackDark: {
     backgroundColor: colors.grey600
   },
   textColumn: {
@@ -31488,7 +31561,12 @@ var styles6 = reactNative.StyleSheet.create({
     color: colors.white
   },
   email: {
-    ...avatarTypography.email,
+    ...avatarTypography.email
+  },
+  emailLight: {
+    color: colors.whiteAlpha60
+  },
+  emailDark: {
     color: colors.grey0
   },
   chevronSlot: {
@@ -31510,7 +31588,15 @@ var styles6 = reactNative.StyleSheet.create({
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 8,
-    gap: 8,
+    gap: 8
+  },
+  menuLight: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: colors.whiteAlpha5,
+    overflow: "hidden"
+  },
+  menuDark: {
     backgroundColor: colors.grey700,
     ...reactNative.Platform.select({
       web: {
@@ -31520,6 +31606,16 @@ var styles6 = reactNative.StyleSheet.create({
         elevation: 8
       }
     })
+  },
+  menuItem: {
+    height: 32,
+    minHeight: 32,
+    paddingVertical: 6
+  },
+  emphasizedMenuItem: {
+    height: 46,
+    minHeight: 46,
+    paddingVertical: 11
   }
 });
 var IMAGE_SIZE2 = 32;
@@ -33529,6 +33625,7 @@ var defaultLanguageOptions = [
 ];
 var CONTROL_WIDTH = 96;
 var CONTROL_HEIGHT = 35;
+var MENU_WIDTH = 90;
 var ICON_SIZE9 = 16;
 var ICON_BUTTON_SIZE2 = 32;
 var ICON_MENU_WIDTH = 67;
@@ -33536,6 +33633,10 @@ var ICON_MENU_HEIGHT = 129;
 var ICON_MENU_TOP = 39;
 var ITEM_HEIGHT = 35;
 var ACTIVE_ITEM_BACKGROUND = "#E38E5E12";
+var menuWebBlurStyle2 = reactNative.Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
 var LanguageSwitcher = react.forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -33640,7 +33741,7 @@ var LanguageSwitcher = react.forwardRef(
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
                 isIconVariant ? styles22.triggerIcon : styles22.trigger,
-                !isIconVariant && (triggerHovered || pressed || isOpen) && styles22.triggerActive
+                !isIconVariant && (triggerHovered || pressed) && styles22.triggerActive
               ],
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE9, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
@@ -33654,7 +33755,11 @@ var LanguageSwitcher = react.forwardRef(
           isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
-              style: [styles22.menu, isIconVariant ? styles22.menuIcon : styles22.menuDefault],
+              style: [
+                styles22.menu,
+                !isIconVariant && menuWebBlurStyle2,
+                isIconVariant ? styles22.menuIcon : styles22.menuDefault
+              ],
               accessibilityRole: "menu",
               children: options.map((option) => {
                 const selected = option.value === selectedValue;
@@ -33669,15 +33774,15 @@ var LanguageSwitcher = react.forwardRef(
                     onHoverOut: () => setHoveredValue(null),
                     style: ({ pressed }) => [
                       styles22.item,
-                      isIconVariant ? styles22.itemIcon : null,
+                      isIconVariant ? styles22.itemIcon : styles22.itemDefault,
                       selected ? isIconVariant ? styles22.itemSelectedIcon : styles22.itemSelected : (hoveredValue === option.value || pressed) && styles22.itemHovered
                     ],
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                    children: ({ pressed }) => /* @__PURE__ */ jsxRuntime.jsx(
                       reactNative.Text,
                       {
                         style: [
                           styles22.itemLabel,
-                          selected && (isIconVariant ? styles22.itemLabelSelectedIcon : styles22.itemLabelSelected)
+                          (selected || hoveredValue === option.value || pressed) && styles22.itemLabelActive
                         ],
                         children: option.label
                       }
@@ -33762,10 +33867,14 @@ var styles22 = reactNative.StyleSheet.create({
   },
   menuDefault: {
     top: CONTROL_HEIGHT + 8,
-    left: 0,
-    width: CONTROL_WIDTH,
-    gap: 8,
-    backgroundColor: colors.whiteAlpha6
+    left: (CONTROL_WIDTH - MENU_WIDTH) / 2,
+    width: MENU_WIDTH,
+    height: 129,
+    gap: 4,
+    backgroundColor: colors.whiteAlpha5,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    borderRadius: 16
   },
   menuIcon: {
     top: ICON_MENU_TOP,
@@ -33793,11 +33902,15 @@ var styles22 = reactNative.StyleSheet.create({
     width: 51,
     alignSelf: "stretch"
   },
+  itemDefault: {
+    width: 74,
+    alignSelf: "center"
+  },
   itemHovered: {
-    backgroundColor: colors.whiteAlpha6
+    backgroundColor: colors.whiteAlpha7
   },
   itemSelected: {
-    backgroundColor: colors.whiteAlpha6
+    backgroundColor: colors.whiteAlpha7
   },
   itemSelectedIcon: {
     backgroundColor: ACTIVE_ITEM_BACKGROUND
@@ -33805,13 +33918,10 @@ var styles22 = reactNative.StyleSheet.create({
   itemLabel: {
     ...languageSwitcherTypography,
     ...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
-    color: colors.white
-  },
-  itemLabelSelected: {
-    color: colors.primary
+    color: colors.whiteAlpha60
   },
-  itemLabelSelectedIcon: {
-    color: colors.primary
+  itemLabelActive: {
+    color: colors.white
   }
 });
 var ICON_SIZE10 = 25.63181;