@fluentui-react-native/experimental-avatar 0.12.19 → 0.13.3

package/lib-commonjs/JSAvatar.types.d.ts

@@ -0,0 +1,76 @@
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
+import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
+export declare const JSAvatarName = "Avatar";
+export declare type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
+export declare type AvatarShape = 'circular' | 'square';
+export declare type AvatarActive = 'active' | 'inactive' | 'unset';
+export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+/**
+ * Sets color of the avatar when there is no picture. Uses fluent color names
+ */
+export declare type AvatarColor = 'cornflower' | 'blue' | 'royalBlue' | 'teal' | 'forest' | 'darkGreen' | 'berry' | 'hotPink' | 'grape' | 'purple' | 'pumpkin' | 'red' | 'burgundy' | 'orchid' | 'brass' | 'darkRed' | 'beige' | 'platinum' | 'steel' | 'brown';
+export declare type AvatarPresence = 'none' | 'offline' | 'online' | 'away' | 'dnd' | 'blocked' | 'busy';
+export declare type RingThickness = number | 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export interface RingConfig {
+    accent?: boolean;
+    transparent?: boolean;
+    ringColor?: ColorValue;
+    ringBackgroundColor?: ColorValue;
+    ringThickness?: RingThickness;
+    innerGap?: RingThickness;
+}
+export interface AvatarConfigurableProps {
+    size?: AvatarSize;
+    ring?: RingConfig;
+    coinColorFluent?: AvatarColor;
+}
+export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+    active?: AvatarActive;
+    activeAppearance?: AvatarActiveAppearance;
+    imageUrl?: string;
+    imageDescription?: string;
+    initials?: string;
+    presence?: AvatarPresence;
+    isOutOfOffice?: boolean;
+    shape?: AvatarShape;
+}
+export interface AvatarSlotProps {
+    root: ViewProps;
+    photo: ImageProps;
+    initials: TextProps;
+    initialsBackground: ViewProps;
+    icon: ImageProps;
+    ring: ViewProps;
+    glow: ViewProps;
+}
+export declare type IconAlignment = 'start' | 'center' | 'end';
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
+    avatarSize?: number;
+    iconSize?: number;
+    iconStrokeWidth?: number;
+    iconStrokeColor?: string;
+    initialsSize?: number;
+    horizontalIconAlignment?: IconAlignment;
+    verticalIconAlignment?: IconAlignment;
+    physicalSize?: number;
+    circular?: JSAvatarTokens;
+    square?: JSAvatarTokens;
+}
+export interface JSAvatarState {
+    personaPhotoSource: ImageURISource | undefined;
+    iconSource: ImageURISource | undefined;
+    showRing: boolean;
+    transparentRing: boolean;
+}
+export interface AvatarInfo {
+    props: JSAvatarProps;
+    state: JSAvatarState;
+}
+export interface JSAvatarType {
+    props: JSAvatarProps;
+    slotProps: AvatarSlotProps;
+    tokens: JSAvatarTokens;
+    state: JSAvatarState;
+}
+//# sourceMappingURL=JSAvatar.types.d.ts.map

package/lib-commonjs/JSAvatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/JSAvatar.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JSAvatarName = 'Avatar';
+//# sourceMappingURL=JSAvatar.types.js.map

package/lib-commonjs/JSAvatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.types.js","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":";;AAIa,QAAA,YAAY,GAAG,QAAQ,CAAC"}

package/lib-commonjs/JSAvatarTokens.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { JSAvatarTokens } from '.';
+export declare const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme>;
+//# sourceMappingURL=JSAvatarTokens.d.ts.map

package/lib-commonjs/JSAvatarTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAajD,CAAC"}

package/lib-commonjs/JSAvatarTokens.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+exports.defaultJSAvatarTokens = function () {
+    return ({
+        horizontalIconAlignment: 'end',
+        verticalIconAlignment: 'end',
+        color: 'white',
+        iconStrokeColor: 'white',
+        backgroundColor: JSAvatar_helpers_1.convertCoinColorFluent('cornflower'),
+        circular: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
+        },
+        square: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.medium,
+        },
+    });
+};
+//# sourceMappingURL=JSAvatarTokens.js.map

package/lib-commonjs/JSAvatarTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;AAGA,uDAA4D;AAC5D,oEAAmE;AAEtD,QAAA,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,yCAAsB,CAAC,YAAY,CAAC;QACrD,QAAQ,EAAE;YACR,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;KACiB,CAAA;AAZpB,CAYoB,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,2 +1,4 @@
 export * from './Avatar';
+export * from './JSAvatar';
+export * from './JSAvatar.types';
 //# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/lib-commonjs/index.js

@@ -4,4 +4,6 @@ function __export(m) {
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 __export(require("./Avatar"));
+__export(require("./JSAvatar"));
+__export(require("./JSAvatar.types"));
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,8BAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,8BAAyB;AACzB,gCAA2B;AAC3B,sCAAiC"}

package/lib-commonjs/useAvatar.d.ts

@@ -0,0 +1,10 @@
+import { JSAvatarProps, AvatarInfo } from './JSAvatar.types';
+/**
+ * Re-usable hook for FURN Avatar.
+ * This hook configures Avatar props and state for FURN Avatar.
+ *
+ * @param props user props sent to FURN Avatar
+ * @returns configured props and state for FURN Avatar
+ */
+export declare const useAvatar: (props: JSAvatarProps) => AvatarInfo;
+//# sourceMappingURL=useAvatar.d.ts.map

package/lib-commonjs/useAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCAgCrB,CAAC"}

package/lib-commonjs/useAvatar.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
+/**
+ * Re-usable hook for FURN Avatar.
+ * This hook configures Avatar props and state for FURN Avatar.
+ *
+ * @param props user props sent to FURN Avatar
+ * @returns configured props and state for FURN Avatar
+ */
+exports.useAvatar = function (props) {
+    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape"]);
+    var personaPhotoSource = imageUrl === undefined
+        ? undefined
+        : {
+            uri: imageUrl,
+        };
+    var iconSource = presence === undefined ? undefined : JSAvatar_helpers_1.getPresenceIconSource(presence, isOutOfOffice || false);
+    var showRing = !!ring;
+    var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
+    var state = {
+        iconSource: iconSource,
+        personaPhotoSource: personaPhotoSource,
+        showRing: showRing,
+        transparentRing: transparentRing,
+    };
+    return {
+        props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
+        state: __assign({}, state),
+    };
+};
+//# sourceMappingURL=useAvatar.js.map

package/lib-commonjs/useAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,mBAAK,EAAE,gHAAO,CAAW;IAEtG,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.12.19",
+  "version": "0.13.3",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -20,18 +20,22 @@
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
   "dependencies": {
-    "@fluentui-react-native/component-cache": "^1.2.3",
-    "@fluentui-react-native/framework": "0.6.6"
+    "@fluentui-react-native/adapters": "^0.8.1",
+    "@fluentui-react-native/component-cache": "^1.3.0",
+    "@fluentui-react-native/framework": "0.7.2",
+    "@fluentui-react-native/theme-tokens": "^0.11.1",
+    "@fluentui-react-native/tokens": "^0.11.1",
+    "@fluentui-react-native/use-styling": "^0.8.0"
   },
   "devDependencies": {
-    "@types/react-native": "^0.63.0",
+    "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@types/react-native": "^0.64.0",
     "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1",
-    "react-native": "^0.63.4",
-    "react": "16.13.1"
+    "react-native": "^0.64.3",
+    "react": "17.0.1"
   },
   "peerDependencies": {
-    "react-native": ">=0.63.4",
-    "react": "16.13.1"
+    "react-native": ">=0.64.3",
+    "react": "17.0.1"
   }
 }

package/src/JSAvatar.helpers.ts

@@ -0,0 +1,126 @@
+import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens, RingThickness } from './JSAvatar.types';
+import { ImageURISource } from 'react-native';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+
+const presenceIconCache: { [key in AvatarPresence]: ImageURISource } = {
+  none: { uri: '' },
+  offline: {
+    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACoxM+oxM+oxM+oxM+oxM+oxM+oxM+oxM////+oxM/W5OmzzNX5+/z3+vvu9Pbt8/Xj7PAAKKEtAAAACXRSTlMA6bWcZQpiXgXWfJCWAAAAeElEQVQoz52RSQ7EIAwEx0AWymT7/2dHYpgoPvQldeySsGl/XjOVZGCpTDFfjIEtj3jN0Pzc99Mb5PUWGbwOHPI/n+GqNxfMY67h9YFjvw0KrQYapYuER+GkLowjigPrArYoNpBCPiWHy3XlB1UlqkRZuziUPO1bvszLC8V87ko/AAAAAElFTkSuQmCC',
+  },
+  online: {
+    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAABusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAX////N4bi61517tivn8d3e7NL3+vTE3Kux0o6nzH6GvEWFZ26xAAAAEnRSTlMA8eNrEQj6syHTeXrKshzZ19JHa6QpAAAApUlEQVQoz4WS6w7CIAyFBwwGbE5th87b+7+mCDXcIp4/NN9J2tJ2+KdRTFyx0yTGAkvLgMRmmbg2kMnoL185FOIr5Vmg0hKzWWhkQz+sNdinN1Eg9wyP8MYh5xvewjt5gxcct9iYN1SIXvsj46C8EWvfEZ0jTsYxRJcrYuLAqTg5xKm4AHL2xEH8/GBvJIM819xIWkc9dt1ZFEnO+WrbY1CcjqGnN0xiGcyuKFtcAAAAAElFTkSuQmCC',
+  },
+  away: {
+    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAP1BMVEUAAAD6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT////6zCP95pH95Yv++OL84Hn822T72FT71EUen9LHAAAAC3RSTlMA6rVlCuWgmGJeBd4LCPMAAAB8SURBVCjPnZFLDoAgDERtQUUH/97/rCYNJUITTXjLeYu2064Z75gAYufLfOqR6KdXPI94Mc5ZDCgYNA8piHGBENJcqgV5EQ61gBPBVrAIsoJEwArUYi0EIbFlQ+VwHGpY11XOGDdZVw/MXPstB2olFeGnRFv796Psa1t5ANwFDZEW8B8sAAAAAElFTkSuQmCC',
+  },
+  dnd: {
+    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAQlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////wfYT86errJjiR9OLxAAAAEXRSTlMA4/CzeQj602seEhEk89jKakfnNfsAAACKSURBVCjPhZFbDoQgDEWBQkHBR2d0/1udEppR0cbzeU9SSq95I69gcZphzZc4eEeC8+HIh0gn4vDPLV2wYsJCHUub5umGr/no7sKNLBI9kFjAkwAWbaX9K+xtMRZIle0jbFRBFpMmZmWU8ri+rv5B/SQmxD6PUknpz16MUJSi9GqZnMAiWkjZvPADxcoYalVfnOMAAAAASUVORK5CYII=',
+  },
+  blocked: {
+    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAe1BMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////pABv83uHqCiTsJz7rGjP7zNHvRVj/+vv+8vP6x83sIzv2mqXsKD/7zNL5v8b3oqz2maTuP1P82Nz819vtKUDrGjLrGTK2dyGvAAAAEXRSTlMA8dSzeQj64mseEhHkJMpq5T3coEAAAADSSURBVCjPhdHZFoIgFAVQGQRLGzhQiaLNw/9/YZRk4IvncZ+17uJys7mUGyYFoWxTJpxzghDC878vKFBftLX6UgN0MXqF/qRCTg5VaPI1ro36Re+MWQ/TOPrEXw7840uCNvb9oQVZ+qJAnbpSNQpfMHQTVx2YLyT0xJWG9IWAnbiyEL4gaCKPCopb7P9RDOeJqzNYeG7i3+eGBVMPC2Yczpn9cfTmAT58IoV5Rn4FDSdZbY1rxzk9qpXHofkcqtO2uXfhUHOn9SkLJoWQrCizmbwBa5IbuX8ugpIAAAAASUVORK5CYII=',
+  },
+  busy: {
+    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
+  },
+};
+
+// TODO: Need icons for the OOF statuses
+const presenceOOFIconCache = presenceIconCache;
+
+export function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource {
+  return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
+}
+
+export type AvatarSizeConfig = {
+  physicalSize: number;
+  iconSize: number;
+  iconStrokeWidth: number;
+  initialsSize: number;
+};
+
+const sizeTable: { [P in AvatarSize]: AvatarSizeConfig } = {
+  size8: { physicalSize: 8, iconSize: 0, iconStrokeWidth: 0, initialsSize: 4 },
+  size24: { physicalSize: 24, iconSize: 8, iconStrokeWidth: 2, initialsSize: 10 },
+  size32: { physicalSize: 32, iconSize: 8, iconStrokeWidth: 2, initialsSize: 12 },
+  size40: { physicalSize: 40, iconSize: 12, iconStrokeWidth: 2, initialsSize: 14 },
+  size48: { physicalSize: 48, iconSize: 12, iconStrokeWidth: 2, initialsSize: 16 },
+  size56: { physicalSize: 56, iconSize: 16, iconStrokeWidth: 3, initialsSize: 18 },
+  size72: { physicalSize: 72, iconSize: 20, iconStrokeWidth: 3, initialsSize: 20 },
+  size100: { physicalSize: 100, iconSize: 28, iconStrokeWidth: 4, initialsSize: 36 },
+  size120: { physicalSize: 120, iconSize: 32, iconStrokeWidth: 4, initialsSize: 40 },
+};
+
+export function getSizeConfig(size: AvatarSize): AvatarSizeConfig {
+  return sizeTable[size];
+}
+
+const colorTableFluent: { [P in AvatarColor]: string } = {
+  cornflower: globalTokens.color.cornflower.primary,
+  blue: globalTokens.color.blue.primary,
+  royalBlue: globalTokens.color.royalBlue.primary,
+  teal: globalTokens.color.teal.primary,
+  forest: globalTokens.color.forest.primary,
+  darkGreen: globalTokens.color.darkGreen.primary,
+  berry: globalTokens.color.berry.primary,
+  hotPink: globalTokens.color.hotPink.primary,
+  grape: globalTokens.color.grape.primary,
+  purple: globalTokens.color.purple.primary,
+  pumpkin: globalTokens.color.pumpkin.primary,
+  red: globalTokens.color.red.primary,
+  burgundy: globalTokens.color.burgundy.primary,
+  orchid: globalTokens.color.orchid.primary,
+  brass: globalTokens.color.brass.primary,
+  darkRed: globalTokens.color.darkRed.primary,
+  beige: globalTokens.color.beige.primary,
+  platinum: globalTokens.color.platinum.primary,
+  steel: globalTokens.color.steel.primary,
+  brown: globalTokens.color.brown.primary,
+};
+
+/**
+ * Converts the AvatarColor into a hex color value
+ */
+export function convertCoinColorFluent(coinColor: AvatarColor): string {
+  return colorTableFluent[coinColor];
+}
+
+export function calculateEffectiveSizes(tokens: JSAvatarTokens): AvatarSizeConfig {
+  const { size, avatarSize, iconSize, iconStrokeWidth, initialsSize } = tokens;
+
+  if (size) {
+    return sizeTable[size];
+  } else {
+    const {
+      physicalSize: defaultPhysicalSize,
+      iconSize: defaultIconSize,
+      iconStrokeWidth: defaultIconStrokeWidth,
+      initialsSize: defaultInitialsSize,
+    } = sizeTable['size40'];
+
+    return {
+      physicalSize: avatarSize || defaultPhysicalSize,
+      iconSize: iconSize || defaultIconSize,
+      iconStrokeWidth: iconStrokeWidth || defaultIconStrokeWidth,
+      initialsSize: initialsSize || defaultInitialsSize,
+    };
+  }
+}
+
+export function getRingThickness(thickness: RingThickness): number {
+  switch (thickness) {
+    case 'xSmall':
+      return 1;
+    case 'small':
+      return 1;
+    case 'medium':
+      return 2;
+    case 'large':
+      return 2;
+    case 'xlarge':
+      return 2;
+    case 'xxlarge':
+      return 4;
+    default:
+      return thickness < 0 ? 4 : thickness;
+  }
+}

package/src/JSAvatar.styling.ts

@@ -0,0 +1,163 @@
+import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
+import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
+import { defaultJSAvatarTokens } from './JSAvatarTokens';
+import { ViewStyle } from 'react-native';
+import { calculateEffectiveSizes, convertCoinColorFluent, getRingThickness } from './JSAvatar.helpers';
+import { borderStyles } from '@fluentui-react-native/tokens';
+
+const nameMap: { [key: string]: string } = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+};
+
+export const avatarStates: (keyof JSAvatarTokens)[] = ['circular', 'square'];
+
+export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
+  tokens: [defaultJSAvatarTokens, JSAvatarName],
+  states: avatarStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: JSAvatarTokens) => {
+        const { physicalSize } = calculateEffectiveSizes(tokens);
+        const { horizontalIconAlignment, verticalIconAlignment } = tokens;
+        return {
+          style: {
+            flexDirection: 'row',
+            width: physicalSize,
+            height: physicalSize,
+            justifyContent: nameMap[horizontalIconAlignment || 'end'] as ViewStyle['justifyContent'],
+            alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
+            horizontalIconAlignment,
+            verticalIconAlignment,
+          },
+        };
+      },
+      ['horizontalIconAlignment', 'verticalIconAlignment'],
+    ),
+    initials: buildProps(
+      (tokens: JSAvatarTokens) => {
+        const { initialsSize } = calculateEffectiveSizes(tokens);
+        return {
+          style: {
+            fontSize: initialsSize,
+          },
+        };
+      },
+      ['initialsSize'],
+    ),
+    initialsBackground: buildProps(
+      (tokens: JSAvatarTokens, theme: Theme) => {
+        const { physicalSize } = calculateEffectiveSizes(tokens);
+        const { backgroundColor, coinColorFluent } = tokens;
+        let effectiveBackgroundColor = backgroundColor;
+        if (coinColorFluent) {
+          effectiveBackgroundColor = convertCoinColorFluent(coinColorFluent);
+        }
+        return {
+          style: {
+            ...borderStyles.from(tokens, theme),
+            width: physicalSize,
+            height: physicalSize,
+            flexGrow: 1,
+            alignSelf: 'stretch',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: effectiveBackgroundColor,
+          },
+        };
+      },
+      ['coinColorFluent', 'backgroundColor', 'physicalSize', ...borderStyles.keys],
+    ),
+    photo: buildProps(
+      (tokens: JSAvatarTokens) => {
+        const { physicalSize } = calculateEffectiveSizes(tokens);
+
+        return {
+          style: {
+            borderRadius: tokens.borderRadius,
+            width: physicalSize,
+            height: physicalSize,
+          },
+        };
+      },
+      ['physicalSize', 'borderRadius'],
+    ),
+    icon: buildProps(
+      (tokens: JSAvatarTokens, theme: Theme) => {
+        const { iconSize, iconStrokeWidth } = calculateEffectiveSizes(tokens);
+        const iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
+        const iconStrokeColor = tokens.iconStrokeColor || theme.colors.background;
+        return {
+          style: {
+            position: 'absolute',
+            width: iconSizeAdjusted,
+            height: iconSizeAdjusted,
+            bottom: -iconStrokeWidth,
+            end: -iconStrokeWidth,
+            borderRadius: iconSizeAdjusted / 2,
+            borderWidth: iconStrokeWidth,
+            borderColor: iconStrokeColor,
+          },
+        };
+      },
+      ['iconSize', 'iconStrokeWidth', 'iconStrokeColor'],
+    ),
+    ring: buildProps(
+      (tokens: JSAvatarTokens, theme: Theme) => {
+        const { physicalSize } = calculateEffectiveSizes(tokens);
+        const { ring } = tokens;
+
+        if (!ring) return {};
+
+        const innerGap = ring.innerGap != undefined ? getRingThickness(ring.innerGap) : getRingThickness(ring.ringThickness || 'xxlarge');
+
+        const effectiveRingThickness = 2 * getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
+        const effectiveSize = physicalSize + 2 * effectiveRingThickness;
+        const ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
+        return {
+          style: {
+            borderStyle: 'solid',
+            borderColor: ringColor,
+            borderWidth: effectiveRingThickness,
+            width: effectiveSize,
+            height: effectiveSize,
+            position: 'absolute',
+            top: -effectiveRingThickness,
+            left: -effectiveRingThickness,
+            ...borderStyles.from(tokens, theme),
+          },
+        };
+      },
+      ['physicalSize', 'ring', 'physicalSize', ...borderStyles.keys],
+    ),
+    glow: buildProps(
+      (tokens: JSAvatarTokens, theme: Theme) => {
+        const { physicalSize } = calculateEffectiveSizes(tokens);
+        const { ring } = tokens;
+
+        if (!ring) return {};
+
+        const innerGap = ring.innerGap != undefined ? getRingThickness(ring.innerGap) : getRingThickness(ring.ringThickness || 'xxlarge');
+
+        const effectiveRingThickness = getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
+        const effectiveSize = physicalSize + 2 * effectiveRingThickness;
+        const glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
+        return {
+          style: {
+            borderStyle: 'solid',
+            borderColor: glowColor,
+            borderWidth: effectiveRingThickness - innerGap,
+            width: effectiveSize,
+            height: effectiveSize,
+            position: 'absolute',
+            top: -effectiveRingThickness,
+            left: -effectiveRingThickness,
+            ...borderStyles.from(tokens, theme),
+          },
+        };
+      },
+      ['physicalSize', 'ring', ...borderStyles.keys],
+    ),
+  },
+};

package/src/JSAvatar.tsx

@@ -0,0 +1,56 @@
+/** @jsx withSlots */
+import { Image, View, Text } from 'react-native';
+import { JSAvatarProps, JSAvatarType, JSAvatarName, JSAvatarState } from './JSAvatar.types';
+import { stylingSettings } from './JSAvatar.styling';
+import { compose, UseSlots, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { useAvatar } from './useAvatar';
+
+/**
+ * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param state The current state of the avatar
+ * @param userProps The props that were passed into the avatar
+ * @returns Whether the styles that are assigned to the layer should be applied to the avatar
+ */
+export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSAvatarProps): boolean => {
+  return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
+};
+
+export const JSAvatar = compose<JSAvatarType>({
+  displayName: JSAvatarName,
+  ...stylingSettings,
+  slots: {
+    root: View,
+    photo: Image,
+    initials: Text,
+    initialsBackground: View,
+    icon: Image,
+    ring: View,
+    glow: View,
+  },
+  render: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
+    const avatar = useAvatar(userProps);
+    const Slots = useSlots(userProps, (layer) => avatarLookup(layer, avatar.state, userProps));
+
+    return (final: JSAvatarProps) => {
+      const { children, accessibilityLabel, ...mergedProps } = mergeProps(avatar.props, final);
+      const { personaPhotoSource, iconSource, showRing, transparentRing } = avatar.state;
+
+      return (
+        <Slots.root {...mergedProps}>
+          {personaPhotoSource ? (
+            <Slots.photo accessibilityLabel={accessibilityLabel} source={personaPhotoSource} />
+          ) : (
+            <Slots.initialsBackground>
+              <Slots.initials>{children}</Slots.initials>
+            </Slots.initialsBackground>
+          )}
+          {showRing && !transparentRing && <Slots.ring />}
+          {showRing && <Slots.glow />}
+          {!!iconSource && !!iconSource.uri && <Slots.icon source={iconSource} />}
+        </Slots.root>
+      );
+    };
+  },
+});