@ecohouse/ui 0.1.34 → 0.1.35

package/src/components/Select/Select.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -64,6 +65,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   /** Override color for the selected value text in the trigger. */
   valueColor?: string;
   style?: StyleProp<ViewStyle>;
+  /** Styles applied to the dropdown menu only (not the trigger). */
+  menuStyle?: StyleProp<ViewStyle>;
   className?: string;
 };
 
@@ -268,6 +271,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       emptyText = "No results",
       valueColor,
       style,
+      menuStyle,
       className,
       accessibilityLabel,
       // Pulled out only to keep them off `rest` (which is spread onto the root View);
@@ -297,6 +301,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+    /** Web: flip menu to the trigger's right edge when it would overflow the viewport. */
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
+    /** Web: open above the trigger when there isn't enough space below. */
+    const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
 
     const selectedValues = useMemo(() => {
       const current = isValueControlled
@@ -330,6 +338,25 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     useApplyWebClassName(rootRef, className);
 
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = StyleSheet.flatten(menuStyle);
+      const width = flat?.width;
+      if (typeof width === "number") return width;
+      const minWidth = flat?.minWidth;
+      if (typeof minWidth === "number") return minWidth;
+      return null;
+    }, [menuStyle]);
+
+    const estimatedMenuHeight = useMemo(() => {
+      const searchBlock = showSearch ? 40 + 8 : 0;
+      const optionCount = Math.max(filteredOptions.length, 1);
+      const listHeight = Math.min(
+        optionCount * 43 + Math.max(0, optionCount - 1) * 8,
+        MENU_MAX_LIST_HEIGHT,
+      );
+      return 24 + searchBlock + listHeight;
+    }, [filteredOptions.length, showSearch]);
+
     const setOpen = useCallback(
       (next: boolean) => {
         if (!isOpenControlled) setUncontrolledOpen(next);
@@ -341,6 +368,8 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
         } else {
           setSearchQuery("");
           setHoveredValue(null);
+          setMenuAlignEnd(false);
+          setMenuPlaceAbove(false);
           // Let the parent reset its externally fetched options.
           onSearchChange?.("");
         }
@@ -348,6 +377,38 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       [isOpenControlled, onOpenChange, onSearchChange, selectedValues],
     );
 
+    // Prefer start (left) / below; flip when the menu would overflow the viewport (web).
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const updateMenuPlacement = () => {
+        const trigger = triggerRef.current as unknown as {
+          getBoundingClientRect?: () => DOMRect;
+        } | null;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+
+        const viewportPadding = 8;
+        const gap = 8;
+        const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+
+        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
+        const spaceAbove = rect.top - viewportPadding;
+        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        setMenuPlaceAbove(needsAbove);
+      };
+
+      updateMenuPlacement();
+      window.addEventListener("resize", updateMenuPlacement);
+      window.addEventListener("scroll", updateMenuPlacement, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPlacement);
+        window.removeEventListener("scroll", updateMenuPlacement, true);
+      };
+    }, [estimatedMenuHeight, isOpen, resolvedMenuWidth]);
+
     const handleSearchChange = (text: string) => {
       setSearchQuery(text);
       onSearchChange?.(text);
@@ -583,7 +644,14 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
           </Pressable>
 
           {isOpen ? (
-            <View style={styles.menu}>
+            <View
+              style={[
+                styles.menu,
+                menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
+                menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
+                menuStyle,
+              ]}
+            >
               {showSearch ? (
                 <View style={styles.searchField}>
                   <View style={styles.iconSlot}>
@@ -777,10 +845,7 @@ const styles = StyleSheet.create({
   },
   menu: {
     position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    marginTop: 8,
+    minWidth: "100%",
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 12,
@@ -795,6 +860,26 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto",
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0,
+  },
+  menuBelow: {
+    top: "100%",
+    bottom: "auto",
+    marginTop: 8,
+    marginBottom: 0,
+  },
+  menuAbove: {
+    top: "auto",
+    bottom: "100%",
+    marginTop: 0,
+    marginBottom: 8,
+  },
   optionList: {
     maxHeight: MENU_MAX_LIST_HEIGHT,
   },

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import { forwardRef, useId, useMemo, useRef, useState, type ComponentRef } from "react";
 import {
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -132,6 +133,8 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
   const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const reactId = useId();
+  const inputDomId = `eh-textarea-${reactId.replace(/:/g, "")}`;
 
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
@@ -141,28 +144,40 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
   const chrome = chromeFor(visualState);
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? undefined : label);
 
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
 
   return (
     <View ref={rootRef} style={[styles.root, disabled && styles.disabled, style]}>
       {showLabel && label ? (
-        <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+        <Pressable disabled={disabled} onPress={focusInput} style={styles.labelPressable}>
+          <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+        </Pressable>
       ) : null}
 
-      <View
+      <Pressable
+        accessibilityRole="none"
+        disabled={disabled}
+        onPress={focusInput}
         style={[
           styles.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor,
           },
+          Platform.OS === "web" ? styles.fieldWeb : null,
           fieldStyle,
         ]}
       >
         <TextInput
           ref={setInputRef}
           {...textInputProps}
+          nativeID={inputDomId}
           multiline
           textAlignVertical="top"
           value={isControlled ? value : undefined}
@@ -193,7 +208,7 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
           accessibilityLabel={resolvedAccessibilityLabel}
           accessibilityState={{ disabled }}
         />
-      </View>
+      </Pressable>
 
       {showHint && hint ? (
         <Text style={[styles.hint, { color: chrome.hintColor }]}>{hint}</Text>
@@ -211,6 +226,9 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.6,
   },
+  labelPressable: {
+    alignSelf: "flex-start",
+  },
   label: {
     ...textareaTypography.label,
   },
@@ -223,14 +241,21 @@ const styles = StyleSheet.create({
     paddingLeft: FIELD_PADDING_HORIZONTAL,
     paddingRight: FIELD_PADDING_HORIZONTAL,
   },
+  fieldWeb: {
+    cursor: "text" as unknown as ViewStyle["cursor"],
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0,
   },
   inputWeb: {
     outlineStyle: "none",
     resize: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text" as unknown as TextStyle["cursor"],
   } as TextStyle,
   inputAndroid: {
     includeFontPadding: false,

package/src/components/index.ts

@@ -41,7 +41,11 @@ export { Sidebar } from "./Sidebar";
 export type { SidebarProps, SidebarItem, SidebarUser } from "./Sidebar";
 
 export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
-export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";
+export type {
+  LanguageOption,
+  LanguageSwitcherProps,
+  LanguageSwitcherVariant,
+} from "./LanguageSwitcher";
 
 export { StatCard } from "./StatCard";
 export type { StatCardProps } from "./StatCard";

package/src/icons/Globe/GlobeIcon.tsx

@@ -3,9 +3,9 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 import { GLOBE_PATH } from "./globePath";
 
-export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
       <Path
         d={GLOBE_PATH}
         stroke={color}

package/src/icons/Globe/GlobeIcon.web.tsx

@@ -2,12 +2,12 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 import { GLOBE_PATH } from "./globePath";
 
-export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 20 20"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden

package/src/icons/Globe/globePath.ts

@@ -1,3 +1,3 @@
-/** Globe paths — 20×20 viewBox. */
+/** Globe paths — 16×16 viewBox. */
 export const GLOBE_PATH =
-  "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";
+  "M1.3335 8.00004H14.6668M1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667M1.3335 8.00004C1.3335 4.31814 4.31826 1.33337 8.00016 1.33337M14.6668 8.00004C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667M14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337M8.00016 1.33337C9.66768 3.15894 10.6153 5.52806 10.6668 8.00004C10.6153 10.472 9.66768 12.8411 8.00016 14.6667M8.00016 1.33337C6.33264 3.15894 5.38499 5.52806 5.3335 8.00004C5.38499 10.472 6.33264 12.8411 8.00016 14.6667";

package/src/icons/Key/keyPath.ts

@@ -1,2 +1,2 @@
 export const KEY_PATH =
-  "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";
+  "M14.1668 8.33333V6.66667C14.1668 4.36548 12.3013 2.5 10.0002 2.5C7.69898 2.5 5.8335 4.36548 5.8335 6.66667V8.33333M10.0002 12.0833V13.75M7.3335 17.5H12.6668C14.067 17.5 14.767 17.5 15.3018 17.2275C15.7722 16.9878 16.1547 16.6054 16.3943 16.135C16.6668 15.6002 16.6668 14.9001 16.6668 13.5V12.3333C16.6668 10.9332 16.6668 10.2331 16.3943 9.69836C16.1547 9.22795 15.7722 8.8455 15.3018 8.60582C14.767 8.33333 14.067 8.33333 12.6668 8.33333H7.3335C5.93336 8.33333 5.2333 8.33333 4.69852 8.60582C4.22811 8.8455 3.84566 9.22795 3.60598 9.69836C3.3335 10.2331 3.3335 10.9332 3.3335 12.3333V13.5C3.3335 14.9001 3.3335 15.6002 3.60598 16.135C3.84566 16.6054 4.22811 16.9878 4.69852 17.2275C5.2333 17.5 5.93336 17.5 7.3335 17.5Z";

package/src/index.ts

@@ -54,6 +54,7 @@ export type {
   SidebarUser,
   LanguageOption,
   LanguageSwitcherProps,
+  LanguageSwitcherVariant,
   StatCardProps,
   ButtonProps,
   ButtonSize,

package/src/theme/typography.ts

@@ -47,13 +47,13 @@ export const segmentedToggleTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Language switcher trigger and option labels — SemiBold 14. */
+/** Language switcher trigger and option labels — SemiBold 14, tracking 3%. */
 export const languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600" as const,
-  lineHeight: 19,
-  letterSpacing: 0,
+  lineHeight: 14,
+  letterSpacing: 0.42,
 } as const;
 
 /** Counter value — Bold 14, line-height 100%, letter-spacing 0. */