@fluentui-react-native/experimental-avatar 0.14.45 → 0.15.0

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-react-native/experimental-avatar",
   "entries": [
     {
-      "date": "Tue, 21 Jun 2022 20:05:09 GMT",
+      "date": "Tue, 21 Jun 2022 21:06:59 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.15.0",
+      "version": "0.15.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "v.kozova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "2ad8751db36583b42e819bbf6667161d2687cf7a",
+            "comment": "Renamed Avatar to NativeAvatar, JSAvatar to Avatar"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Jun 2022 20:05:26 GMT",
       "tag": "@fluentui-react-native/experimental-avatar_v0.14.45",
       "version": "0.14.45",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @fluentui-react-native/experimental-avatar
 
-This log was last generated on Tue, 21 Jun 2022 20:05:09 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Jun 2022 21:06:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.15.0
+
+Tue, 21 Jun 2022 21:06:59 GMT
+
+### Minor changes
+
+- Renamed Avatar to NativeAvatar, JSAvatar to Avatar (v.kozova13@gmail.com)
+
 ## 0.14.45
 
-Tue, 21 Jun 2022 20:05:09 GMT
+Tue, 21 Jun 2022 20:05:26 GMT
 
 ### Patches
 

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

@@ -2,7 +2,7 @@ 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 = {
+export declare type NativeAvatarTokens = {
     /**
      * Supported Avatar sizes
      */
@@ -12,7 +12,7 @@ export declare type AvatarTokens = {
      */
     avatarStyle?: AvatarStyle;
 };
-export declare type AvatarProps = AvatarTokens & {
+export declare type NativeAvatarProps = NativeAvatarTokens & {
     /**
      * The image to be displayed
      */
@@ -63,8 +63,8 @@ export declare type AvatarProps = AvatarTokens & {
      */
     customBorderImageSource?: ImageURISource;
 };
-export declare type NativeAvatarViewProps = ViewProps & AvatarProps;
-export declare const Avatar: import("@fluentui-react-native/framework").ComposableComponent<AvatarProps, {
+export declare type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
+export declare const NativeAvatar: import("@fluentui-react-native/framework").ComposableComponent<NativeAvatarProps, {
     root: NativeAvatarViewProps;
-}, AvatarTokens, object>;
-//# sourceMappingURL=Avatar.d.ts.map
+}, NativeAvatarTokens, object>;
+//# sourceMappingURL=NativeAvatar.d.ts.map

package/lib/NativeAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.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,kBAAkB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,iBAAiB,GAAG,kBAAkB,GAAG;IACnD;;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,iBAAiB,CAAC;AAOlE,eAAO,MAAM,YAAY;UAJJ,qBAAqB;8BAgCxC,CAAC"}

package/lib/{Avatar.js → NativeAvatar.js}

@@ -13,11 +13,11 @@ var __assign = (this && this.__assign) || function () {
 import { compose, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { NativeModules } from 'react-native';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
-var avatarName = 'Avatar';
+var avatarName = 'NativeAvatar';
 var NativeAvatarView = ensureNativeComponent('FRNAvatarView');
 var ExportedNativeConstants = NativeModules.FRNAvatarViewManager;
 var tokensThatAreAlsoProps = ['size', 'avatarStyle'];
-export var Avatar = compose({
+export var NativeAvatar = compose({
     displayName: avatarName,
     tokens: [
         {
@@ -42,4 +42,4 @@ export var Avatar = compose({
         return function (rest) { return withSlots(Root, __assign({}, mergeProps(props, rest))); };
     },
 });
-//# sourceMappingURL=Avatar.js.map
+//# sourceMappingURL=NativeAvatar.js.map

package/lib/NativeAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAkB,aAAa,EAAyB,MAAM,cAAc,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,UAAU,GAAG,cAAc,CAAC;AAElC,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAYhE,IAAM,uBAAuB,GAAsB,aAAa,CAAC,oBAAoB,CAAC;AA6EtF,IAAM,sBAAsB,GAAiC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASrF,MAAM,CAAC,IAAM,YAAY,GAAG,OAAO,CAAa;IAC9C,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,UAAU,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,SAAS,EAAE,UAAC,KAAwB,EAAE,QAA8B;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,UAAC,IAAuB,IAAK,OAAA,UAAC,IAAI,eAAK,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAAI,EAArC,CAAqC,CAAC;IAC5E,CAAC;CACF,CAAC,CAAC"}

package/lib/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';
 //# 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,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/index.js

@@ -1,4 +1,2 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';
 //# 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,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

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

@@ -2,7 +2,7 @@ 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 = {
+export declare type NativeAvatarTokens = {
     /**
      * Supported Avatar sizes
      */
@@ -12,7 +12,7 @@ export declare type AvatarTokens = {
      */
     avatarStyle?: AvatarStyle;
 };
-export declare type AvatarProps = AvatarTokens & {
+export declare type NativeAvatarProps = NativeAvatarTokens & {
     /**
      * The image to be displayed
      */
@@ -63,8 +63,8 @@ export declare type AvatarProps = AvatarTokens & {
      */
     customBorderImageSource?: ImageURISource;
 };
-export declare type NativeAvatarViewProps = ViewProps & AvatarProps;
-export declare const Avatar: import("@fluentui-react-native/framework").ComposableComponent<AvatarProps, {
+export declare type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
+export declare const NativeAvatar: import("@fluentui-react-native/framework").ComposableComponent<NativeAvatarProps, {
     root: NativeAvatarViewProps;
-}, AvatarTokens, object>;
-//# sourceMappingURL=Avatar.d.ts.map
+}, NativeAvatarTokens, object>;
+//# sourceMappingURL=NativeAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.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,kBAAkB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,iBAAiB,GAAG,kBAAkB,GAAG;IACnD;;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,iBAAiB,CAAC;AAOlE,eAAO,MAAM,YAAY;UAJJ,qBAAqB;8BAgCxC,CAAC"}

package/lib-commonjs/{Avatar.js → NativeAvatar.js}

@@ -11,16 +11,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
+exports.NativeAvatar = void 0;
 /** @jsx withSlots */
 var framework_1 = require("@fluentui-react-native/framework");
 var react_native_1 = require("react-native");
 var component_cache_1 = require("@fluentui-react-native/component-cache");
-var avatarName = 'Avatar';
+var avatarName = 'NativeAvatar';
 var NativeAvatarView = (0, component_cache_1.ensureNativeComponent)('FRNAvatarView');
 var ExportedNativeConstants = react_native_1.NativeModules.FRNAvatarViewManager;
 var tokensThatAreAlsoProps = ['size', 'avatarStyle'];
-exports.Avatar = (0, framework_1.compose)({
+exports.NativeAvatar = (0, framework_1.compose)({
     displayName: avatarName,
     tokens: [
         {
@@ -45,4 +45,4 @@ exports.Avatar = (0, framework_1.compose)({
         return function (rest) { return (0, framework_1.withSlots)(Root, __assign({}, (0, framework_1.mergeProps)(props, rest))); };
     },
 });
-//# sourceMappingURL=Avatar.js.map
+//# sourceMappingURL=NativeAvatar.js.map

package/lib-commonjs/NativeAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,8DAAwG;AACxG,6CAAoF;AACpF,0EAA+E;AAE/E,IAAM,UAAU,GAAG,cAAc,CAAC;AAElC,IAAM,gBAAgB,GAAG,IAAA,uCAAqB,EAAC,eAAe,CAAC,CAAC;AAYhE,IAAM,uBAAuB,GAAsB,4BAAa,CAAC,oBAAoB,CAAC;AA6EtF,IAAM,sBAAsB,GAAiC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASxE,QAAA,YAAY,GAAG,IAAA,mBAAO,EAAa;IAC9C,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,IAAA,sBAAU,EACd,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,SAAS,EAAE,UAAC,KAAwB,EAAE,QAA8B;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,UAAC,IAAuB,IAAK,OAAA,2BAAC,IAAI,eAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,CAAC,EAAI,EAArC,CAAqC,CAAC;IAC5E,CAAC;CACF,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';
 //# 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;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib-commonjs/index.js

@@ -10,7 +10,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Avatar"), exports);
-__exportStar(require("./JSAvatar"), exports);
-__exportStar(require("./JSAvatar.types"), exports);
+__exportStar(require("./NativeAvatar"), exports);
 //# 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,2CAAyB;AACzB,6CAA2B;AAC3B,mDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.45",
+  "version": "0.15.0",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -25,16 +25,8 @@
     "directory": "packages/experimental/Avatar"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "^0.8.5",
-    "@fluentui-react-native/badge": "^0.0.43",
     "@fluentui-react-native/component-cache": "^1.3.2",
-    "@fluentui-react-native/framework": "0.7.30",
-    "@fluentui-react-native/icon": "^0.12.1",
-    "@fluentui-react-native/interactive-hooks": "^0.16.3",
-    "@fluentui-react-native/theme-tokens": "^0.18.0",
-    "@fluentui-react-native/tokens": "^0.14.0",
-    "@fluentui-react-native/use-styling": "^0.8.3",
-    "react-native-svg": "^12.3.0"
+    "@fluentui-react-native/framework": "0.7.30"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",

package/src/{Avatar.tsx → NativeAvatar.tsx}

@@ -3,7 +3,7 @@ import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-
 import { ImageURISource, NativeModules, ViewProps, ColorValue } from 'react-native';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 
-const avatarName = 'Avatar';
+const avatarName = 'NativeAvatar';
 
 const NativeAvatarView = ensureNativeComponent('FRNAvatarView');
 
@@ -19,7 +19,7 @@ interface ExportedConstants {
 
 const ExportedNativeConstants: ExportedConstants = NativeModules.FRNAvatarViewManager;
 
-export type AvatarTokens = {
+export type NativeAvatarTokens = {
   /**
    * Supported Avatar sizes
    */
@@ -31,7 +31,7 @@ export type AvatarTokens = {
   avatarStyle?: AvatarStyle;
 };
 
-export type AvatarProps = AvatarTokens & {
+export type NativeAvatarProps = NativeAvatarTokens & {
   /**
    * The image to be displayed
    */
@@ -94,16 +94,16 @@ export type AvatarProps = AvatarTokens & {
   customBorderImageSource?: ImageURISource;
 };
 
-const tokensThatAreAlsoProps: (keyof AvatarTokens)[] = ['size', 'avatarStyle'];
+const tokensThatAreAlsoProps: (keyof NativeAvatarTokens)[] = ['size', 'avatarStyle'];
 
-export type NativeAvatarViewProps = ViewProps & AvatarProps;
+export type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
 interface AvatarType {
-  props: AvatarProps;
+  props: NativeAvatarProps;
   slotProps: { root: NativeAvatarViewProps };
-  tokens: AvatarTokens;
+  tokens: NativeAvatarTokens;
 }
 
-export const Avatar = compose<AvatarType>({
+export const NativeAvatar = compose<AvatarType>({
   displayName: avatarName,
   tokens: [
     {
@@ -115,7 +115,7 @@ export const Avatar = compose<AvatarType>({
   tokensThatAreAlsoProps,
   slots: { root: NativeAvatarView },
   slotProps: {
-    root: buildProps<NativeAvatarViewProps, AvatarTokens>(
+    root: buildProps<NativeAvatarViewProps, NativeAvatarTokens>(
       (tokens) => ({
         size: tokens.size,
         style: {
@@ -126,9 +126,9 @@ export const Avatar = compose<AvatarType>({
       ['size'],
     ),
   },
-  useRender: (props: AvatarProps, useSlots: UseSlots<AvatarType>) => {
+  useRender: (props: NativeAvatarProps, useSlots: UseSlots<AvatarType>) => {
     const Root = useSlots(props).root;
 
-    return (rest: AvatarProps) => <Root {...mergeProps(props, rest)} />;
+    return (rest: NativeAvatarProps) => <Root {...mergeProps(props, rest)} />;
   },
 });

package/src/__tests__/Avatar.test.jsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Avatar } from '..';
+import { getInitials } from '../useAvatar';
+import * as renderer from 'react-test-renderer';
+
+const alphabeticalTestNames = [
+  'Marie',
+  'Aadi KaPoor',
+  'Marie Beaudouin',
+  'Aadi Meni KaPoor',
+  'Aadi Meni Ka Jr',
+  'Will Little (Teams)',
+  'Will Little-Tanaka',
+  '-Aadi Kapoor',
+  'Richard 23 Feynman',
+  '* Richard *',
+  'Richard Feynman [Teams]',
+  'Richard Feynman {Teams}',
+];
+const alphabeticalInitials = ['M', 'AK', 'MB', 'AK', 'AK', 'WL', 'WL', 'AK', 'RF', 'R', 'RF', 'RF'];
+const namesWithTitles = ['Mr Feynman', 'Dr Richard Feynman'];
+const initialsForNameWithTitles = ['F', 'RF'];
+
+describe('Avatar rendering', () => {
+  it('renders Avatar', () => {
+    const tree = renderer.create(<Avatar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('getInitials - names with titles', () => {
+  it('returns initials without title', () => {
+    expect(getInitials('Mr Faynman')).toBe('F');
+  });
+  it('returns initials for names with multi-word titles', () => {
+    expect(getInitials('Consul General Richard Faynman')).toBe('RF');
+    expect(getInitials('Major General Victor')).toBe('V');
+  });
+});
+
+describe('getInitials method - language support', () => {
+  it('returns correct initials cyrillic language', () => {
+    const test = getInitials('Илон Маск');
+    expect(test).toBe('ИМ');
+  });
+  it('calculates correct initials for non-ASCII characters', () => {
+    const test = getInitials('Írissa Þórðardóttir');
+    expect(test).toBe('ÍÞ');
+  });
+  it('returns correct initials for non-ASCII characters', () => {
+    const test = getInitials('Øyvind Åsen');
+    expect(test).toBe('ØÅ');
+  });
+});
+
+describe('getInitials method', () => {
+  it('returns correct initials', () => {
+    const test = getInitials('-Test   str  with *spaces');
+    expect(test).toBe('TS');
+  });
+  it('returns an empty string if name is undefined', () => {
+    expect(getInitials(undefined)).toBe('');
+  });
+  it('return initials for alphabetical words', () => {
+    for (let i = 0; i < alphabeticalTestNames.length; i++) {
+      expect(getInitials(alphabeticalTestNames[i])).toBe(alphabeticalInitials[i]);
+    }
+  });
+  it('return initials for words with titles', () => {
+    for (let i = 0; i < namesWithTitles.length; i++) {
+      expect(getInitials(namesWithTitles[i])).toBe(initialsForNameWithTitles[i]);
+    }
+  });
+  it("returns initials when there's a coma", () => {
+    expect(getInitials('Second, First')).toEqual('SF');
+  });
+  // Unit tests from Web
+  it('handles null inputs', () => {
+    expect(getInitials(null)).toEqual('');
+    expect(getInitials(undefined)).toEqual('');
+  });
+  it('calculates an expected initials in LTR with a hypen', () => {
+    expect(getInitials('David Zearing-Goff')).toEqual('DZ');
+  });
+  it('calculates an expected initials in LTR with numbers', () => {
+    expect(getInitials('4lex 5loo')).toEqual('LL');
+  });
+  it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', () => {
+    const result = getInitials(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)    ');
+    expect(result).toEqual('DG');
+  });
+  it('calculates an expected initials in LTR with multiple types of unwanted text', () => {
+    const result = getInitials(" !@#$%^&*()=+ (Alpha) /David   (The man) `~<>,./?[]{}|   'Goff   (Gamma)  [Beta]  ");
+    expect(result).toEqual('DG');
+  });
+  it('calculates an expected initials for Arabic names', () => {
+    expect(getInitials('خسرو رحیمی')).toEqual('خ');
+  });
+  it('calculates an expected initials for Chinese names', () => {
+    expect(getInitials('桂英')).toEqual('桂');
+    expect(getInitials('佳')).toEqual('佳');
+    expect(getInitials('宋智洋')).toEqual('宋');
+  });
+  it('calculates an expected initials for Korean names', () => {
+    expect(getInitials('강현')).toEqual('강');
+    expect(getInitials('최종래')).toEqual('최');
+    expect(getInitials('남궁 성종')).toEqual('남');
+  });
+  it('calculates an expected initials for Japanese names', () => {
+    expect(getInitials('松田')).toEqual('松');
+    expect(getInitials('海野')).toEqual('海');
+    expect(getInitials('かり')).toEqual('か');
+  });
+  it('validates phone numbers', () => {
+    expect(getInitials('12345678')).toEqual('');
+    // expect(getInitials('+1 (555) 123-4567 ext.4567')).toEqual('');
+    expect(getInitials('+47 12 34 56 78 (X 5678)')).toEqual('');
+    expect(getInitials('47 12 34')).toEqual('');
+    expect(getInitials('47 12')).toEqual('');
+
+    expect(getInitials('James Ext 2')).toEqual('JE');
+    // expect(getInitials('1 Ext 2')).toEqual('');
+    // expect(getInitials('1x1')).toEqual('');
+    result = getInitials('1');
+    expect(result).toEqual('');
+    result = getInitials('A 2');
+    expect(result).toEqual('A');
+  });
+});

package/src/index.ts

@@ -1,3 +1 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';

package/MIGRATION.md

@@ -1,157 +0,0 @@
-# Avatar Migration
-
-## Migration from PersonaCoin component
-
-### Component renames
-
-| `PersonaCoin`                                                | `Avatar`                                         |
-| ------------------------------------------------------------ | ------------------------------------------------ |
-| `<PersonaCoin size='size24' initials="SN" />`                | `<Avatar size={24} initials="SN" />`             |
-| `<PersonaCoin presence='available' coinColorFluent="red" />` | `<Avatar size={24} initials="SN" />`             |
-| `<PersonaCoin imageUrl="./path/name.png" />`                 | `<Avatar image={{source: './path/name.png'}} />` |
-| `<PersonaCoin imageDescription="Photo" />`                   | `<Avatar accessibilityLabel="Photo" />`          |
-
-### Props that remain as is
-
-- `icon`
-- `initials`
-- `size`
-- `imageUrl`
-
-### Props no longer supported with an equivalent functionality in Avatar
-
-- `coinColorFluent` => Use `avatarColor` instead.
-- `imageDescription` => Use `accessibilityLabel` instead.
-- `isOutOfOffice` => `outOfOffice` is part of `badge` slot. Use `badge={{ outOfOffice: true }} />`.
-- `presence` => It's part of `badge` slot. Use `badge={{ presence: 'available' }} />`.
-- `ring` => `ring` became part of `activeAppearance` prop. It's used together with `active='active'` prop.
-
-### New props
-
-- `active`
-- `activeAppearance` - According to Web spec there should be `ring`, `shadow`, `glow`, `ring-shadow`, `ring-glow`.
-  Currently we support only `ring`. `activeAppearance` can be used when `active` prop set to `active`.
-- `name` - is used for generation initials with `getInitials` method.
-- `shape` - can be `circular` and `square`.
-- `idForColor`
-
-### Tokens that remain as is
-
-- Any props that are part of `IBackgroundColorTokens`, `IForegroundColorTokens`
-
-- `iconSize`
-- `iconWeight`
-- `size`
-
-### Tokens no longer supported with an equivalent functionality in Avatar
-
-- `initialsSize` => Use `fontSize` token instead
-- `coinColorFluent` => Use `avatarColor` token instead
-- `coinSize` => Use size tokens instead.
-- `ring` => Use `ringBackgroundColor`, `ringColor`, `ringThickness` and `ringInnerGap`
-
-### Tokens no longer supported without an equivalent functionality in Avatar
-
-- `iconStrokeWidth` and `iconStrokeColor` => This was for activity ring around the Avatar.
-  We support ring in `activeAppearance` prop. `borderColor` will be changed using `ringColor` token and `borderWidth` using ringThickness token.
-- `horizontalIconAlignment` and `verticalIconAlignment` => these props were responsible for presence badge position.
-
-### New tokens
-
-- Any props that are part of `FontTokens` and `IBorderTokens`.
-- `avatarOpacity`
-- `badgeSize`
-- `circular`
-- `iconColor`
-- `inactive`
-- `square`
-
-Size tokens:
-
-- `size20`
-- `size24`
-- `size28`
-- `size32`
-- `size36`
-- `size40`
-- `size48`
-- `size56`
-- `size64`
-- `size72`
-- `size96`
-- `size120`
-
-Color tokens:
-
-- `neutral`
-- `brand`
-- `darkRed`
-- `cranberry`
-- `red`
-- `pumpkin`
-- `peach`
-- `marigold`
-- `gold`
-- `brass`
-- `brown`
-- `forest`
-- `seafoam`
-- `darkGreen`
-- `lightTeal`
-- `teal`
-- `steel`
-- `blue`
-- `royalBlue`
-- `cornflower`
-- `navy`
-- `lavender`
-- `purple`
-- `grape`
-- `lilac`
-- `pink`
-- `magenta`
-- `plum`
-- `beige`
-- `mink`
-- `platinum`
-- `anchor`
-
-### Slots no longer supported with an equivalent functionality in v1 Avatar
-
-- `photo` => Use `image` slot instead or `imageUrl` prop.
-
-### Slots no longer supported without an equivalent functionality in v1 Avatar
-
-- `glow` => is not suported in this version of Avatar
-
-### New slots
-
-- `badge`
-
-### Prop differences due to technical differences and limitations
-
-- Web uses `image` slot which is part of `react-image` component. They use syntax `image={{ src: './MonaKane.jpg' }}`. If we use similar syntax, our users will need to write `image={{ source: { uri: './MonaKane.jpg' } }} />`. In majority of cases users pass image URL that's why we still have opportunity to pass this parameter using `imageUrl` prop. But there's also a way to pass `image` object similar to Web.
-
-### Other Prop differences
-
-- `avatarColor` => Web uses `color` prop and omits it from `ComponentProps<AvatarSlots>`. Their users can style font color using CSS but our users can style the component via tokens. If we use the same prop name (color), we'll need to omit it from foregroundTokens and come up with a new name for the font color prop. That's why we use `avatarColor` prop instead of `color`.
-
-## Property mapping
-
-| `PersonaCoin`      | `Avatar`             |
-| ------------------ | -------------------- |
-|                    | `active`             |
-|                    | `activeAppearance`   |
-|                    | `badge`              |
-| `coinColorFluent`  | `avatarColor`        |
-| `icon`             | `icon`               |
-|                    | `idForColor`         |
-| `imageUrl`         | `imageUrl`           |
-| `imageDescription` | `accessibilityLabel` |
-| `isOutOfOffice`    |                      |
-| `initials`         | `initials`           |
-|                    | `name`               |
-| `presence`         |                      |
-| `ring`             |                      |
-|                    | `shape`              |
-| `size`             | `size`               |