@ecohouse/ui 0.1.53 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/Avatar/Avatar.stories.tsx

@@ -26,6 +26,7 @@ const accountMenuItems: AvatarMenuItem[] = [
     onPress: fn(),
     backgroundColor: colors.redMuted,
     hoverColor: colors.redHover,
+    labelStyle: { color: colors.red },
   },
 ];
 
@@ -37,12 +38,14 @@ const meta = {
     email: "anna.hakobyan@example.com",
     imageUrl: "https://i.pravatar.cc/150?img=47",
     showChevron: true,
+    variant: "light",
     disabled: false,
     onPress: fn(),
   },
   argTypes: {
     disabled: { control: "boolean" },
     showChevron: { control: "boolean" },
+    variant: { control: "inline-radio", options: ["light", "dark"] },
     onPress: { action: "pressed" },
   },
   parameters: {
@@ -55,6 +58,11 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+/** Original solid avatar design, preserved through the `dark` variant. */
+export const Dark: Story = {
+  args: { variant: "dark" },
+};
+
 /** No `imageUrl` — falls back to the placeholder person icon. */
 export const WithoutImage: Story = {
   args: { imageUrl: undefined },

package/src/components/Avatar/Avatar.tsx

@@ -28,13 +28,15 @@ import { MenuItem, type MenuItemProps } from "../../primitives";
 /** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
 export type AvatarMenuItem = Pick<
   MenuItemProps,
-  "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"
+  "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor" | "labelStyle"
 > & {
   /** Stable identity for React keys; falls back to `label`. */
   key?: string;
   onPress: () => void;
 };
 
+export type AvatarVariant = "light" | "dark";
+
 export interface AvatarProps extends Omit<
   PressableProps,
   "onPress" | "disabled" | "style" | "children" | "hitSlop"
@@ -51,6 +53,8 @@ export interface AvatarProps extends Omit<
   disabled?: boolean;
   /** Trailing chevron, typically used to hint a dropdown/menu. */
   showChevron?: boolean;
+  /** Visual treatment. `light` is the translucent header design; `dark` preserves the original solid design. */
+  variant?: AvatarVariant;
   /**
    * Account-menu options, supplied entirely by the consumer (icon, label,
    * action, and per-item colors). When set, pressing the chip opens a
@@ -69,11 +73,28 @@ export interface AvatarProps extends Omit<
 }
 
 const IMAGE_SIZE = 48;
+const CONTAINER_HEIGHT = 56;
 const CONTAINER_RADIUS = 71;
 const CHEVRON_SIZE = 20;
 const FALLBACK_ICON_SIZE = 20;
 const MENU_RADIUS = 16;
 
+const triggerWebBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(40px)",
+        WebkitBackdropFilter: "blur(40px)",
+      } as ViewStyle)
+    : {};
+
+const menuWebBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(40px)",
+        WebkitBackdropFilter: "blur(40px)",
+      } as ViewStyle)
+    : {};
+
 export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(function Avatar(
   {
     name,
@@ -82,6 +103,7 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
     onPress,
     disabled = false,
     showChevron = true,
+    variant = "light",
     menuItems,
     open: openProp,
     defaultOpen = false,
@@ -106,6 +128,7 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
   const isOpenControlled = typeof openProp === "boolean";
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
+  const isLightVariant = variant === "light";
 
   useApplyWebClassName(containerRef, className);
 
@@ -194,7 +217,13 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
         accessibilityState={
           isInteractive ? { disabled, expanded: hasMenu ? isOpen : undefined } : undefined
         }
-        style={[styles.root, disabled && styles.disabled, style]}
+        style={[
+          styles.root,
+          isLightVariant ? styles.rootLight : styles.rootDark,
+          isLightVariant && triggerWebBlurStyle,
+          disabled && styles.disabled,
+          style,
+        ]}
       >
         <View style={styles.imageWrap}>
           {hasImage ? (
@@ -204,8 +233,16 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
               onError={() => setImageFailed(true)}
             />
           ) : (
-            <View style={styles.imageFallback}>
-              <UserIcon size={FALLBACK_ICON_SIZE} color={colors.primary} />
+            <View
+              style={[
+                styles.imageFallback,
+                isLightVariant ? styles.imageFallbackLight : styles.imageFallbackDark,
+              ]}
+            >
+              <UserIcon
+                size={FALLBACK_ICON_SIZE}
+                color={isLightVariant ? colors.white : colors.primary}
+              />
             </View>
           )}
         </View>
@@ -215,7 +252,10 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
             {name}
           </Text>
           {email ? (
-            <Text style={styles.email} numberOfLines={1}>
+            <Text
+              style={[styles.email, isLightVariant ? styles.emailLight : styles.emailDark]}
+              numberOfLines={1}
+            >
               {email}
             </Text>
           ) : null}
@@ -223,13 +263,23 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
 
         {showChevron ? (
           <View style={[styles.chevronSlot, isOpen && styles.chevronOpen]}>
-            <ChevronDownIcon size={CHEVRON_SIZE} color={isOpen ? colors.primary : colors.grey100} />
+            <ChevronDownIcon
+              size={CHEVRON_SIZE}
+              color={isLightVariant ? colors.white : isOpen ? colors.primary : colors.grey100}
+            />
           </View>
         ) : null}
       </Pressable>
 
       {hasMenu && isOpen ? (
-        <View style={[styles.menu, menuWidth != null && { right: undefined, width: menuWidth }]}>
+        <View
+          style={[
+            styles.menu,
+            isLightVariant ? styles.menuLight : styles.menuDark,
+            isLightVariant && menuWebBlurStyle,
+            menuWidth != null && { right: undefined, width: menuWidth },
+          ]}
+        >
           {resolvedMenuItems.map((item) => {
             const itemKey = item.key ?? item.label;
             return (
@@ -239,8 +289,16 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
                 label={item.label}
                 disabled={item.disabled}
                 backgroundColor={item.backgroundColor}
-                hoverColor={item.hoverColor}
+                hoverColor={item.hoverColor ?? (isLightVariant ? colors.whiteAlpha7 : undefined)}
+                labelStyle={item.labelStyle}
                 onPress={() => handleItemPress(item)}
+                style={
+                  isLightVariant
+                    ? item.backgroundColor
+                      ? styles.emphasizedMenuItem
+                      : styles.menuItem
+                    : undefined
+                }
               />
             );
           })}
@@ -259,6 +317,7 @@ const styles = StyleSheet.create({
     zIndex: 20,
   },
   root: {
+    height: CONTAINER_HEIGHT,
     flexDirection: "row",
     alignItems: "center",
     alignSelf: "flex-start",
@@ -268,6 +327,11 @@ const styles = StyleSheet.create({
     paddingLeft: 4,
     paddingRight: 12,
     borderRadius: CONTAINER_RADIUS,
+  },
+  rootLight: {
+    backgroundColor: colors.whiteAlpha5,
+  },
+  rootDark: {
     backgroundColor: colors.grey700,
   },
   disabled: {
@@ -289,6 +353,14 @@ const styles = StyleSheet.create({
     height: IMAGE_SIZE,
     alignItems: "center",
     justifyContent: "center",
+  },
+  imageFallbackLight: {
+    borderRadius: IMAGE_SIZE / 2,
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+  },
+  imageFallbackDark: {
     backgroundColor: colors.grey600,
   },
   textColumn: {
@@ -302,6 +374,11 @@ const styles = StyleSheet.create({
   },
   email: {
     ...avatarTypography.email,
+  },
+  emailLight: {
+    color: colors.whiteAlpha60,
+  },
+  emailDark: {
     color: colors.grey0,
   },
   chevronSlot: {
@@ -324,6 +401,14 @@ const styles = StyleSheet.create({
     borderRadius: MENU_RADIUS,
     padding: 8,
     gap: 8,
+  },
+  menuLight: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: colors.whiteAlpha5,
+    overflow: "hidden",
+  },
+  menuDark: {
     backgroundColor: colors.grey700,
     ...Platform.select({
       web: {
@@ -334,4 +419,14 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuItem: {
+    height: 32,
+    minHeight: 32,
+    paddingVertical: 6,
+  },
+  emphasizedMenuItem: {
+    height: 46,
+    minHeight: 46,
+    paddingVertical: 11,
+  },
 });

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
 export { Avatar } from "./Avatar";
-export type { AvatarProps, AvatarMenuItem } from "./Avatar";
+export type { AvatarProps, AvatarMenuItem, AvatarVariant } from "./Avatar";

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -60,15 +60,24 @@ export const defaultLanguageOptions = [
 
 const CONTROL_WIDTH = 96;
 const CONTROL_HEIGHT = 35;
+const MENU_WIDTH = 90;
 const ICON_SIZE = 16;
 const ICON_BUTTON_SIZE = 32;
 const ICON_MENU_WIDTH = 67;
 const ICON_MENU_HEIGHT = 129;
 const ICON_MENU_TOP = 39;
 const ITEM_HEIGHT = 35;
-/** Active option wash from design (`#E38E5E` at 7%). */
+/** Active option wash for the compact account-header variant. */
 const ACTIVE_ITEM_BACKGROUND = "#E38E5E12";
 
+const menuWebBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(40px)",
+        WebkitBackdropFilter: "blur(40px)",
+      } as ViewStyle)
+    : {};
+
 export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSwitcherProps>(
   function LanguageSwitcher(
     {
@@ -184,7 +193,7 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
           onHoverOut={() => setTriggerHovered(false)}
           style={({ pressed }) => [
             isIconVariant ? styles.triggerIcon : styles.trigger,
-            !isIconVariant && (triggerHovered || pressed || isOpen) && styles.triggerActive,
+            !isIconVariant && (triggerHovered || pressed) && styles.triggerActive,
           ]}
         >
           <GlobeIcon size={ICON_SIZE} color={colors.white} strokeWidth={isIconVariant ? 1.5 : 2} />
@@ -202,7 +211,11 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
 
         {isOpen && options.length > 0 ? (
           <View
-            style={[styles.menu, isIconVariant ? styles.menuIcon : styles.menuDefault]}
+            style={[
+              styles.menu,
+              !isIconVariant && menuWebBlurStyle,
+              isIconVariant ? styles.menuIcon : styles.menuDefault,
+            ]}
             accessibilityRole="menu"
           >
             {options.map((option) => {
@@ -218,7 +231,7 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
                   onHoverOut={() => setHoveredValue(null)}
                   style={({ pressed }) => [
                     styles.item,
-                    isIconVariant ? styles.itemIcon : null,
+                    isIconVariant ? styles.itemIcon : styles.itemDefault,
                     selected
                       ? isIconVariant
                         ? styles.itemSelectedIcon
@@ -226,15 +239,17 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
                       : (hoveredValue === option.value || pressed) && styles.itemHovered,
                   ]}
                 >
-                  <Text
-                    style={[
-                      styles.itemLabel,
-                      selected &&
-                        (isIconVariant ? styles.itemLabelSelectedIcon : styles.itemLabelSelected),
-                    ]}
-                  >
-                    {option.label}
-                  </Text>
+                  {({ pressed }) => (
+                    <Text
+                      style={[
+                        styles.itemLabel,
+                        (selected || hoveredValue === option.value || pressed) &&
+                          styles.itemLabelActive,
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
+                  )}
                 </Pressable>
               );
             })}
@@ -314,10 +329,14 @@ const styles = 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,
@@ -345,11 +364,15 @@ const styles = 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,
@@ -357,12 +380,9 @@ const styles = StyleSheet.create({
   itemLabel: {
     ...languageSwitcherTypography,
     ...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,
   },
 });