@fluentui-react-native/experimental-avatar 0.13.0 → 0.13.4

package/{lib-commonjs/Avatar.types.d.ts → lib/JSAvatar.types.d.ts}

@@ -1,8 +1,11 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
-export declare const avatarName = "Avatar";
+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
  */
@@ -22,12 +25,15 @@ export interface AvatarConfigurableProps {
     ring?: RingConfig;
     coinColorFluent?: AvatarColor;
 }
-export interface AvatarProps extends IViewProps, AvatarConfigurableProps {
+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;
@@ -39,7 +45,7 @@ export interface AvatarSlotProps {
     glow: ViewProps;
 }
 export declare type IconAlignment = 'start' | 'center' | 'end';
-export interface AvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
     avatarSize?: number;
     iconSize?: number;
     iconStrokeWidth?: number;
@@ -48,21 +54,23 @@ export interface AvatarTokens extends IBackgroundColorTokens, IForegroundColorTo
     horizontalIconAlignment?: IconAlignment;
     verticalIconAlignment?: IconAlignment;
     physicalSize?: number;
+    circular?: JSAvatarTokens;
+    square?: JSAvatarTokens;
 }
-export interface AvatarState {
+export interface JSAvatarState {
     personaPhotoSource: ImageURISource | undefined;
     iconSource: ImageURISource | undefined;
     showRing: boolean;
     transparentRing: boolean;
 }
 export interface AvatarInfo {
-    props: AvatarProps;
-    state: AvatarState;
+    props: JSAvatarProps;
+    state: JSAvatarState;
 }
-export interface AvatarType {
-    props: AvatarProps;
+export interface JSAvatarType {
+    props: JSAvatarProps;
     slotProps: AvatarSlotProps;
-    tokens: AvatarTokens;
-    state: AvatarState;
+    tokens: JSAvatarTokens;
+    state: JSAvatarState;
 }
-//# sourceMappingURL=Avatar.types.d.ts.map
+//# sourceMappingURL=JSAvatar.types.d.ts.map

package/lib/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/JSAvatar.types.js

@@ -0,0 +1,2 @@
+export var JSAvatarName = 'Avatar';
+//# sourceMappingURL=JSAvatar.types.js.map

package/lib/JSAvatar.types.js.map

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

package/lib/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/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/JSAvatarTokens.js

@@ -0,0 +1,18 @@
+import { convertCoinColorFluent } from './JSAvatar.helpers';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+export var defaultJSAvatarTokens = function () {
+    return ({
+        horizontalIconAlignment: 'end',
+        verticalIconAlignment: 'end',
+        color: 'white',
+        iconStrokeColor: 'white',
+        backgroundColor: convertCoinColorFluent('cornflower'),
+        circular: {
+            borderRadius: globalTokens.corner.radius.circle,
+        },
+        square: {
+            borderRadius: globalTokens.corner.radius.medium,
+        },
+    });
+};
+//# sourceMappingURL=JSAvatarTokens.js.map

package/lib/JSAvatarTokens.js.map

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

package/lib/index.d.ts

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

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,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/index.js

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

package/lib/index.js.map

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

package/lib/useAvatar.d.ts

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

package/lib/useAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGtE;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,oCA+BrB,CAAC"}
+{"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/useAvatar.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getPresenceIconSource } from './Avatar.helpers';
+import { getPresenceIconSource } from './JSAvatar.helpers';
 /**
  * Re-usable hook for FURN Avatar.
  * This hook configures Avatar props and state for FURN Avatar.
@@ -29,7 +29,7 @@ import { getPresenceIconSource } from './Avatar.helpers';
  * @returns configured props and state for FURN Avatar
  */
 export var useAvatar = function (props) {
-    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring"]);
+    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
         : {
@@ -45,7 +45,7 @@ export var useAvatar = function (props) {
         transparentRing: transparentRing,
     };
     return {
-        props: __assign({ children: initials, accessibilityLabel: imageDescription }, rest),
+        props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
         state: __assign({}, state),
     };
 };

package/lib/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAkB;IAClC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,uGAAO,CAAW;IAE/F,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,qBAAqB,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,GAAgB;QACzB,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,IACjC,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,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,qBAAqB,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/lib-commonjs/Avatar.d.ts

@@ -1,3 +1,70 @@
-import { AvatarProps } from './Avatar.types';
-export declare const Avatar: import("@fluentui-react-native/composition").ComposeFactoryComponent<AvatarProps, import("./Avatar.types").AvatarSlotProps, import("./Avatar.types").AvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
+import { ImageURISource, ViewProps, ColorValue } from 'react-native';
+export declare type Size = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
+export declare type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
+export declare type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
+export declare type AvatarTokens = {
+    /**
+     * Supported Avatar sizes
+     */
+    size?: Size;
+    /**
+     * Supported Avatar styles
+     */
+    avatarStyle?: AvatarStyle;
+};
+export declare type AvatarProps = AvatarTokens & {
+    /**
+     * The image to be displayed
+     */
+    imageSource?: ImageURISource;
+    /**
+     * The primary text to create initials with (e.g. a name)
+     */
+    primaryText?: string;
+    /**
+     * The secondary text to create initials with if primary text is not provided (e.g. an email address)
+     */
+    secondaryText?: string;
+    /**
+     * A custom color for the ring around the Avatar
+     */
+    ringColor?: ColorValue;
+    /**
+     * A custom color for the avatar initials when no image is shown
+     */
+    foregroundColor?: ColorValue;
+    /**
+     * A custom color for the avatar background when no image is shown
+     */
+    backgroundColor?: ColorValue;
+    /**
+     * The avatar view's presence state.
+     */
+    presence?: Presence;
+    /**
+     * A boolean inidicating whether the ring is visible
+     */
+    isRingVisible?: boolean;
+    /**
+     * A boolean indicating whether the Inner Ring Gap is transparent
+     */
+    isTransparent?: boolean;
+    /**
+     * A boolean indicating out of office status
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * A boolean indicating whether the gap between the avatar and ring is visible.
+     */
+    hasRingInnerGap?: boolean;
+    /**
+     * An image to be shown as the backdrop of the ring, rather then a solid color.
+     * Takes precendence over `ringColor`
+     */
+    customBorderImageSource?: ImageURISource;
+};
+export declare type NativeAvatarViewProps = ViewProps & AvatarProps;
+export declare const Avatar: import("@fluentui-react-native/composition").ComposeFactoryComponent<AvatarProps, {
+    root: NativeAvatarViewProps;
+}, AvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAKrE,eAAO,MAAM,MAAM,8NAoCjB,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOpF,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElF,oBAAY,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAEvG,oBAAY,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAQ1G,oBAAY,YAAY,GAAG;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,WAAW,GAAG,YAAY,GAAG;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,cAAc,CAAC;CAC1C,CAAC;AAIF,oBAAY,qBAAqB,GAAG,SAAS,GAAG,WAAW,CAAC;AAO5D,eAAO,MAAM,MAAM;;0EA4BjB,CAAC"}

package/lib-commonjs/Avatar.js

@@ -10,44 +10,38 @@ var __assign = (this && this.__assign) || function () {
     };
     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 });
 /** @jsx withSlots */
-var react_native_1 = require("react-native");
-var Avatar_types_1 = require("./Avatar.types");
-var Avatar_styling_1 = require("./Avatar.styling");
 var framework_1 = require("@fluentui-react-native/framework");
-var useAvatar_1 = require("./useAvatar");
-exports.Avatar = framework_1.compose(__assign(__assign({ displayName: Avatar_types_1.avatarName }, Avatar_styling_1.stylingSettings), { slots: {
-        root: react_native_1.View,
-        photo: react_native_1.Image,
-        initials: react_native_1.Text,
-        initialsBackground: react_native_1.View,
-        icon: react_native_1.Image,
-        ring: react_native_1.View,
-        glow: react_native_1.View,
-    }, render: function (userProps, useSlots) {
-        var Avatar = useAvatar_1.useAvatar(userProps);
-        var Slots = useSlots(userProps, function (layer) { return Avatar.state[layer] || userProps[layer]; });
-        return function (final) {
-            var _a = framework_1.mergeProps(Avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
-            var _b = Avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
-            return (framework_1.withSlots(Slots.root, __assign({}, mergedProps),
-                personaPhotoSource ? (framework_1.withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (framework_1.withSlots(Slots.initialsBackground, null,
-                    framework_1.withSlots(Slots.initials, null, children))),
-                showRing && !transparentRing && framework_1.withSlots(Slots.ring, null),
-                showRing && framework_1.withSlots(Slots.glow, null),
-                !!iconSource && !!iconSource.uri && framework_1.withSlots(Slots.icon, { source: iconSource })));
-        };
-    } }));
+var react_native_1 = require("react-native");
+var component_cache_1 = require("@fluentui-react-native/component-cache");
+var avatarName = 'Avatar';
+var NativeAvatarView = component_cache_1.ensureNativeComponent('FRNAvatarView');
+var ExportedNativeConstants = react_native_1.NativeModules.FRNAvatarViewManager;
+var tokensThatAreAlsoProps = ['size', 'avatarStyle'];
+exports.Avatar = framework_1.compose({
+    displayName: avatarName,
+    tokens: [
+        {
+            size: 'small',
+            avatarStyle: 'default',
+        },
+        avatarName,
+    ],
+    tokensThatAreAlsoProps: tokensThatAreAlsoProps,
+    slots: { root: NativeAvatarView },
+    slotProps: {
+        root: framework_1.buildProps(function (tokens) { return ({
+            size: tokens.size,
+            style: {
+                height: ExportedNativeConstants.sizes[tokens.size],
+                width: ExportedNativeConstants.sizes[tokens.size],
+            },
+        }); }, ['size']),
+    },
+    render: function (props, useSlots) {
+        var Root = useSlots(props).root;
+        return function (rest) { return framework_1.withSlots(Root, __assign({}, framework_1.mergeProps(props, rest))); };
+    },
+});
 //# sourceMappingURL=Avatar.js.map

package/lib-commonjs/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,+CAAqE;AACrE,mDAAmD;AACnD,8DAA4F;AAC5F,yCAAwC;AAE3B,QAAA,MAAM,GAAG,mBAAO,qBAC3B,WAAW,EAAE,yBAAU,IACpB,gCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,KAAK,EAAE,oBAAK;QACZ,QAAQ,EAAE,mBAAI;QACd,kBAAkB,EAAE,mBAAI;QACxB,IAAI,EAAE,oBAAK;QACX,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,mBAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAsB,EAAE,QAA8B;QAC7D,IAAM,MAAM,GAAG,qBAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAvC,CAAuC,CAAC,CAAC;QAEtF,OAAO,UAAC,KAAkB;YACxB,IAAM,gDAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,sBAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,sBAAC,KAAK,CAAC,kBAAkB;oBACvB,sBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,sBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,qBAAqB;AACrB,8DAAwG;AACxG,6CAAoF;AACpF,0EAA+E;AAE/E,IAAM,UAAU,GAAG,QAAQ,CAAC;AAE5B,IAAM,gBAAgB,GAAG,uCAAqB,CAAC,eAAe,CAAC,CAAC;AAYhE,IAAM,uBAAuB,GAAsB,4BAAa,CAAC,oBAAoB,CAAC;AA6EtF,IAAM,sBAAsB,GAA2B,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASlE,QAAA,MAAM,GAAG,mBAAO,CAAa;IACxC,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,SAAS;SACvB;QACD,UAAU;KACX;IACD,sBAAsB,wBAAA;IACtB,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;IACjC,SAAS,EAAE;QACT,IAAI,EAAE,sBAAU,CACd,UAAC,MAAM,IAAK,OAAA,CAAC;YACX,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE;gBACL,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBAClD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;aAClD;SACF,CAAC,EANU,CAMV,EACF,CAAC,MAAM,CAAC,CACT;KACF;IACD,MAAM,EAAE,UAAC,KAAkB,EAAE,QAA8B;QACzD,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,UAAC,IAAiB,IAAK,OAAA,sBAAC,IAAI,eAAK,sBAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAAI,EAArC,CAAqC,CAAC;IACtE,CAAC;CACF,CAAC,CAAC"}

package/lib-commonjs/JSAvatar.d.ts

@@ -0,0 +1,12 @@
+import { JSAvatarProps, JSAvatarState } from './JSAvatar.types';
+/**
+ * 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 declare const avatarLookup: (layer: string, state: JSAvatarState, userProps: JSAvatarProps) => boolean;
+export declare const JSAvatar: import("@fluentui-react-native/composition").ComposeFactoryComponent<JSAvatarProps, import("./JSAvatar.types").AvatarSlotProps, import("./JSAvatar.types").JSAvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
+//# sourceMappingURL=JSAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,4EAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}

package/lib-commonjs/{Avatar.helpers.d.ts → JSAvatar.helpers.d.ts}

@@ -1,4 +1,4 @@
-import { AvatarSize, AvatarColor, AvatarPresence, AvatarTokens, RingThickness } from './Avatar.types';
+import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens, RingThickness } from './JSAvatar.types';
 import { ImageURISource } from 'react-native';
 export declare function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource;
 export declare type AvatarSizeConfig = {
@@ -12,6 +12,6 @@ export declare function getSizeConfig(size: AvatarSize): AvatarSizeConfig;
  * Converts the AvatarColor into a hex color value
  */
 export declare function convertCoinColorFluent(coinColor: AvatarColor): string;
-export declare function calculateEffectiveSizes(tokens: AvatarTokens): AvatarSizeConfig;
+export declare function calculateEffectiveSizes(tokens: JSAvatarTokens): AvatarSizeConfig;
 export declare function getRingThickness(thickness: RingThickness): number;
-//# sourceMappingURL=Avatar.helpers.d.ts.map
+//# sourceMappingURL=JSAvatar.helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA4B9C,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,GAAG,cAAc,CAEtG;AAED,oBAAY,gBAAgB,GAAG;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAcF,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,gBAAgB,CAEhE;AAyBD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,CAErE;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,gBAAgB,CAoBhF;AAED,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM,CAiBjE"}

package/lib-commonjs/{Avatar.helpers.js → JSAvatar.helpers.js}

@@ -107,4 +107,4 @@ function getRingThickness(thickness) {
     }
 }
 exports.getRingThickness = getRingThickness;
-//# sourceMappingURL=Avatar.helpers.js.map
+//# sourceMappingURL=JSAvatar.helpers.js.map

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

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

package/lib-commonjs/JSAvatar.js

@@ -0,0 +1,64 @@
+"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 });
+/** @jsx withSlots */
+var react_native_1 = require("react-native");
+var JSAvatar_types_1 = require("./JSAvatar.types");
+var JSAvatar_styling_1 = require("./JSAvatar.styling");
+var framework_1 = require("@fluentui-react-native/framework");
+var useAvatar_1 = require("./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
+ */
+exports.avatarLookup = function (layer, state, userProps) {
+    return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
+};
+exports.JSAvatar = framework_1.compose(__assign(__assign({ displayName: JSAvatar_types_1.JSAvatarName }, JSAvatar_styling_1.stylingSettings), { slots: {
+        root: react_native_1.View,
+        photo: react_native_1.Image,
+        initials: react_native_1.Text,
+        initialsBackground: react_native_1.View,
+        icon: react_native_1.Image,
+        ring: react_native_1.View,
+        glow: react_native_1.View,
+    }, render: function (userProps, useSlots) {
+        var avatar = useAvatar_1.useAvatar(userProps);
+        var Slots = useSlots(userProps, function (layer) { return exports.avatarLookup(layer, avatar.state, userProps); });
+        return function (final) {
+            var _a = framework_1.mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
+            var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
+            return (framework_1.withSlots(Slots.root, __assign({}, mergedProps),
+                personaPhotoSource ? (framework_1.withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (framework_1.withSlots(Slots.initialsBackground, null,
+                    framework_1.withSlots(Slots.initials, null, children))),
+                showRing && !transparentRing && framework_1.withSlots(Slots.ring, null),
+                showRing && framework_1.withSlots(Slots.glow, null),
+                !!iconSource && !!iconSource.uri && framework_1.withSlots(Slots.icon, { source: iconSource })));
+        };
+    } }));
+//# sourceMappingURL=JSAvatar.js.map

package/lib-commonjs/JSAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,mDAA4F;AAC5F,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AAExC;;;;;;;GAOG;AACU,QAAA,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,CAAC;AAC3H,CAAC,CAAC;AAEW,QAAA,QAAQ,GAAG,mBAAO,qBAC7B,WAAW,EAAE,6BAAY,IACtB,kCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,KAAK,EAAE,oBAAK;QACZ,QAAQ,EAAE,mBAAI;QACd,kBAAkB,EAAE,mBAAI;QACxB,IAAI,EAAE,oBAAK;QACX,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,mBAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,qBAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,oBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5C,CAA4C,CAAC,CAAC;QAE3F,OAAO,UAAC,KAAoB;YAC1B,IAAM,gDAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,sBAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,sBAAC,KAAK,CAAC,kBAAkB;oBACvB,sBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,sBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}

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

@@ -0,0 +1,5 @@
+import { JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
+import { UseStylingOptions } from '@fluentui-react-native/framework';
+export declare const avatarStates: (keyof JSAvatarTokens)[];
+export declare const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens>;
+//# sourceMappingURL=JSAvatar.styling.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAA2B,CAAC;AAE7E,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAmJ7F,CAAC"}