@gryt/ui-native 0.12.0 → 0.13.0

package/README.md

@@ -57,6 +57,25 @@ properties and no cascade, so components take a theme from context instead:
 Rendered outside a provider, components get the dark theme rather than nothing,
 which matches `@gryt/ui` shipping its dark tokens on `:root`.
 
+## Avatars are generated, not fetched
+
+`Avatar` takes a `seed` and draws that person's owl from `@gryt/owl` — the same
+generator and the same seed the web uses, so somebody looks the same in both
+apps.
+
+```tsx
+import { Avatar } from "@gryt/ui-native";
+import { avatarSeed } from "@gryt/owl";
+
+<Avatar seed={avatarSeed(member.nickname)} name={member.nickname} size="md" />;
+```
+
+`react-native-svg` is a peer dependency for it. React Native's `Image` cannot
+decode SVG from a data URI, so the markup goes to `SvgXml` instead — the web
+hands the same string to an `<img>`, and that is the one place the two renderers
+genuinely differ. Without a seed the component is what it was: the `source`
+image if there is one, initials if there is not.
+
 ## Parity exceptions
 
 Kept from the first component rather than the first argument. Full 1:1 is the
@@ -77,7 +96,7 @@ goal, so the honest list is worth more than a claim of parity that isn't one.
 | `Dialog` | Android's back button stands in for Escape | It is the only hardware dismiss a phone has. `AlertDialog` disables it along with the scrim, matching Base UI suppressing outside-press and Escape. |
 | `Switch` | Drawn from tokens, not React Native's `Switch` | The platform control is green on iOS and Material on Android, and `thumbColor`/`trackColor` do not reach the whole shape. A design system that cannot colour its own switch is not one. |
 | `Select` | A list, not the platform picker | iOS gives a wheel and Android a dialog. Neither takes the Gryt palette and they look nothing like each other. |
-| `Checkbox` | The tick is a text glyph, not a Phosphor icon | An icon set would be this package's first runtime dependency, for one glyph, and `@phosphor-icons/react` renders SVG that React Native cannot mount without `react-native-svg`. That is a decision for whoever needs icons, not for a checkbox. |
+| `Checkbox` | The tick is a text glyph, not a Phosphor icon | An icon set would be this package's first icon dependency, for one glyph. `react-native-svg` is a peer now, for the owl avatars, so mounting SVG is no longer the obstacle — but `@phosphor-icons/react` is still a web package, and picking a set is a decision for whoever needs icons rather than for a checkbox. |
 | `Tabs` | Each tab draws its own underline; `Indicator` renders nothing | Base UI slides one indicator between tabs, measured against the active one. Sliding it here means measuring every tab and animating between them, which is real work for a decoration. The underline appears rather than slides. |
 | `Tabs` | The panel has no `tabpanel` role | React Native has `tab` and `tablist` and no `tabpanel`. The panel is reachable, it just does not announce itself as belonging to the tab. |
 | `Collapsible` | Unmounts when closed instead of animating height | The web animates height, which needs the content measured first. Doable with `onLayout` and `Animated`, at the cost of a frame at the wrong size. |

package/dist/components/Avatar/Avatar.d.ts

@@ -3,8 +3,15 @@ export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 export interface AvatarProps {
     name?: string;
     source?: string;
+    /**
+     * Draws this person's owl, from @gryt/owl. The same seed draws the same owl
+     * here as it does on the web, which is the point of the package.
+     *
+     * Pass `avatarSeed(nickname)` rather than the nickname itself.
+     */
+    seed?: string;
     size?: AvatarSize;
     style?: StyleProp<ViewStyle>;
 }
-export declare function Avatar({ name, source, size, style }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ name, seed, source, size, style }: AvatarProps): import("react").JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAK3E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAU1D,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAuBD,wBAAgB,MAAM,CAAC,EAAE,IAAS,EAAE,MAAM,EAAE,IAAW,EAAE,KAAK,EAAE,EAAE,WAAW,+BA+C5E"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM3E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAU1D,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAyBD,wBAAgB,MAAM,CAAC,EAAE,IAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAW,EAAE,KAAK,EAAE,EAAE,WAAW,+BAmElF"}

package/dist/components/Avatar/Avatar.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { owlAvatarSvg } from "@gryt/owl";
+import { useMemo, useState } from "react";
 import { Image, View } from "react-native";
+import { SvgXml } from "react-native-svg";
 import { Text } from "../../internal/Text.js";
 import { useTheme } from "../../theme/index.js";
 const SIZES = {
@@ -16,6 +18,8 @@ const SIZES = {
  * Deliberately the same arithmetic as the web: sum the code units and take the
  * remainder. Anything cleverer would give a different colour on each platform
  * for the same person, which is the one outcome to avoid.
+ *
+ * Only reached with no `source` and no `seed`. An owl brings its own colour.
  */
 function toneFor(name) {
     const tones = ["accent", "secondary", "success", "danger", "warning"];
@@ -32,11 +36,14 @@ function initials(name) {
         return parts[0].slice(0, 2).toUpperCase();
     return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
-export function Avatar({ name = "", source, size = "md", style }) {
+export function Avatar({ name = "", seed, source, size = "md", style }) {
     const theme = useTheme();
     const [failed, setFailed] = useState(false);
     const px = SIZES[size];
     const ramp = theme.scales[toneFor(name)];
+    // Memoised for the same reason the web one is: these render in member lists
+    // that repaint often and the seed never changes under a row.
+    const owl = useMemo(() => (seed ? owlAvatarSvg(seed) : undefined), [seed]);
     const frame = {
         width: px,
         height: px,
@@ -45,11 +52,18 @@ export function Avatar({ name = "", source, size = "md", style }) {
         justifyContent: "center",
         overflow: "hidden",
     };
-    // A broken image URL falls back to initials rather than to a blank circle.
-    // The web gets this from <img onerror>; here it is onError plus state.
+    // A broken image URL falls back to the owl, or to initials without a seed,
+    // rather than to a blank circle. The web gets this from <img onerror>; here
+    // it is onError plus state.
     if (source && !failed) {
         return (_jsx(View, { style: [frame, { backgroundColor: theme.color.surfaceRaised }, style], children: _jsx(Image, { source: { uri: source }, onError: () => setFailed(true), accessibilityLabel: name || undefined, style: { width: px, height: px } }) }));
     }
+    // SvgXml with the raw markup, not an Image with a data URI: React Native's
+    // Image cannot decode SVG, which is the one place the two renderers genuinely
+    // differ. The web hands the same generator's output to an <img> and it works.
+    if (owl) {
+        return (_jsx(View, { accessibilityRole: "image", accessibilityLabel: name || undefined, style: [frame, style], children: _jsx(SvgXml, { xml: owl, width: px, height: px }) }));
+    }
     return (_jsx(View, { accessibilityRole: "image", accessibilityLabel: name || undefined, style: [frame, { backgroundColor: ramp[2] }, style], children: _jsx(Text, { style: {
                 color: ramp[10],
                 fontSize: Math.round(px * 0.4),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gryt/ui-native",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "license": "MIT",
   "description": "Gryt's design system on React Native. Same tokens as @gryt/ui, a different renderer.",
@@ -36,10 +36,12 @@
     "react-native-reanimated": ">=4.0.0",
     "@gorhom/bottom-sheet": ">=5.2.0",
     "react-native-gesture-handler": ">=2.16.1",
-    "react-native-safe-area-context": ">=5.0.0"
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-svg": ">=15.0.0"
   },
   "dependencies": {
-    "@gryt/theme": "^0.5.0"
+    "@gryt/owl": "^0.1.0",
+    "@gryt/theme": "^0.6.0"
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.2.14",
@@ -49,6 +51,7 @@
     "react-native-gesture-handler": "^2.32.0",
     "react-native-reanimated": "^4.5.1",
     "react-native-safe-area-context": "^5.7.0",
+    "react-native-svg": "^15.14.0",
     "vitest": "^3.0.0"
   },
   "peerDependenciesMeta": {}