@lotics/ui 2.4.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/avatar.web.tsx

@@ -0,0 +1,102 @@
+import type { ImageContentFit, ImageSource } from "expo-image";
+import { Image, View, StyleSheet, StyleProp, ViewStyle, ImageStyle } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+
+interface AvatarProps {
+  size?: number;
+  source?: ImageSource;
+  name?: string;
+  style?: StyleProp<ViewStyle | ImageStyle>;
+  contentFit?: ImageContentFit;
+  /**
+   * When true, the avatar announces its `name` to assistive tech. Default
+   * false because avatars almost always appear adjacent to the name text —
+   * announcing the image as well would double-read. Pass `announce` when the
+   * avatar is standalone (with no visible name nearby).
+   */
+  announce?: boolean;
+}
+
+/**
+ * Web Avatar. The native `avatar.tsx` renders through `expo-image`, a native
+ * module that pulls expo's runtime into the graph and fails to load under
+ * pure-web bundlers (Vite dev throws on its CJS interop; vitest can't resolve
+ * expo's winter runtime). On web, `react-native`'s `Image` (→ react-native-web
+ * → `<img>`) renders the same circular avatar with none of that cost. The prop
+ * surface is identical — `ImageSource`/`ImageContentFit` are kept as erased
+ * type-only imports so no expo-image module is ever loaded.
+ */
+export function Avatar(props: AvatarProps) {
+  const { source, size = 32, name = "Unknown", style, contentFit, announce } = props;
+  const decorative = !announce;
+
+  if (!source || !source.uri) {
+    return (
+      <View
+        accessible={!decorative}
+        accessibilityLabel={decorative ? undefined : name}
+        accessibilityElementsHidden={decorative}
+        importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
+        aria-hidden={decorative || undefined}
+        style={[
+          styles.base,
+          { backgroundColor: colors.blue["600"], width: size, height: size },
+          style,
+        ]}
+      >
+        {/* Initials are a visual shorthand for the name; the accessible name is
+            on the container so the SR does not read "HM" in addition. */}
+        <Text
+          userSelect="none"
+          size="xs"
+          weight="medium"
+          color="inverted"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          aria-hidden
+        >
+          {getInitials(name, size)}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <Image
+      accessibilityLabel={decorative ? undefined : name}
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
+      style={[styles.base, { width: size, height: size }, style as ImageStyle]}
+      source={{ uri: source.uri }}
+      resizeMode={contentFit === "contain" ? "contain" : "cover"}
+    />
+  );
+}
+
+function getInitials(name: string, size?: number): string {
+  let initials = 2;
+
+  if (size && size <= 32) {
+    initials = 1;
+
+    if (name.length <= 2) {
+      return name;
+    }
+  }
+
+  return name
+    .split(" ")
+    .map((c) => c.charAt(0).toUpperCase())
+    .slice(0, initials)
+    .join("");
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 999,
+    justifyContent: "center",
+    alignItems: "center",
+    userSelect: "none",
+  },
+});