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

package/lib-commonjs/useAvatar.js

@@ -1,112 +0,0 @@
-"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 });
-exports.removeTitlesFromName = exports.removeRedundantCharacters = exports.getInitials = exports.useAvatar = void 0;
-var JSAvatar_types_1 = require("./JSAvatar.types");
-var titles_1 = require("./titles");
-var getHashCode_1 = require("./getHashCode");
-/**
- * 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
- */
-var useAvatar = function (props) {
-    var _a;
-    var avatarColor = props.avatarColor, active = props.active, accessibilityLabel = props.accessibilityLabel, accessibilityRole = props.accessibilityRole, activeAppearance = props.activeAppearance, badge = props.badge, idForColor = props.idForColor, initials = props.initials, name = props.name, ring = props.ring, shape = props.shape, rest = __rest(props, ["avatarColor", "active", "accessibilityLabel", "accessibilityRole", "activeAppearance", "badge", "idForColor", "initials", "name", "ring", "shape"]);
-    var showRing = active === 'active' && activeAppearance === 'ring';
-    var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
-    var showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
-    var accessibilityText = "".concat(name || '').concat(showBadge ? ", ".concat(badge.status) : '');
-    var badgeProps = __assign({ size: 'small' }, badge);
-    var state = {
-        showRing: showRing,
-        transparentRing: transparentRing,
-        showBadge: showBadge,
-    };
-    var _initials = initials || (0, exports.getInitials)(name);
-    var avatarColorsIdx = (0, getHashCode_1.getHashCodeWeb)((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % JSAvatar_types_1.AvatarColors.length;
-    var _avatarColor = avatarColor === 'colorful' ? JSAvatar_types_1.AvatarColors[avatarColorsIdx] : avatarColor;
-    return {
-        props: __assign(__assign({ accessible: true, accessibilityLabel: accessibilityLabel || accessibilityText, accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : 'image', avatarColor: _avatarColor, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance, badge: badgeProps, initials: _initials }),
-        state: __assign({}, state),
-    };
-};
-exports.useAvatar = useAvatar;
-/**
- * A function which takes a name and returns initials
- *
- * @param name
- * @returns initials. First letter of the word if only one word was provided.
- * First letters of the first and last words if more words were provided.
- * Words in braces, titles, special characters, parantheses and dashes should be ignored.
- */
-var getInitials = function (name) {
-    if (!name) {
-        return '';
-    }
-    var ARABIC_ASIAN_REGEXP = new RegExp('[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF\uD840-\uD869]', 'g');
-    var words = (0, exports.removeRedundantCharacters)(name);
-    var wordsLength = words.length;
-    var lastWordIdx = wordsLength - 1;
-    var firstLetter = words[0].charAt(0).toUpperCase();
-    var lastLetter = wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : '';
-    var initials = "".concat(firstLetter).concat(ARABIC_ASIAN_REGEXP.test(name) ? '' : lastLetter);
-    return initials;
-};
-exports.getInitials = getInitials;
-/**
- * A function which takes a name and returns array of valid words
- *
- * @param name
- * @returns array of words without phone numbers and special characters.
- */
-var removeRedundantCharacters = function (name) {
-    if (!name) {
-        return [];
-    }
-    var WORDS_IN_BRACES_REGEXP = new RegExp('[(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]', 'g');
-    var PHONE_NUMBER_REGEXP = new RegExp('(\\+|(\\d|\\s))', 'g');
-    var SPECIAL_CHARACTERS_REGEXP = new RegExp('[!"#\'$%&*+,-./:;>=<?@^_`|~¡¢£¤¥¦§¨©ª«¬®ˉ°±²¼½¾¿×÷]', 'g');
-    var words = name
-        .replace(WORDS_IN_BRACES_REGEXP, '')
-        .replace(PHONE_NUMBER_REGEXP, ' ')
-        .replace(SPECIAL_CHARACTERS_REGEXP, '')
-        .trim()
-        .split(' ');
-    return (0, exports.removeTitlesFromName)(words);
-};
-exports.removeRedundantCharacters = removeRedundantCharacters;
-/**
- * A function which verifies whether words array contains title
- *
- * @param words array of words in name
- * @returns array of words without titles
- */
-var removeTitlesFromName = function (words) {
-    return words.filter(function (word) { return !titles_1.titles.has(word); });
-};
-exports.removeTitlesFromName = removeTitlesFromName;
-//# sourceMappingURL=useAvatar.js.map

package/lib-commonjs/useAvatar.js.map

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

package/src/JSAvatar.helpers.ts

@@ -1,35 +0,0 @@
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-const sizeAdjustment = {
-  small: 8,
-  medium: 12,
-  large: 16,
-};
-
-export type AvatarSizeConfig = {
-  iconSize: number;
-  iconStrokeWidth: number;
-  initialsSize: number;
-};
-
-export function getRingConfig(size: number): any {
-  if (size <= 48) {
-    return {
-      size: size + sizeAdjustment.small,
-      stroke: globalTokens.stroke.width.thick,
-      innerStroke: globalTokens.stroke.width.thick,
-    };
-  }
-  if (size <= 71) {
-    return {
-      size: size + sizeAdjustment.medium,
-      stroke: globalTokens.stroke.width.thicker,
-      innerStroke: globalTokens.stroke.width.thicker,
-    };
-  }
-  return {
-    size: size + sizeAdjustment.large,
-    stroke: globalTokens.stroke.width.thickest,
-    innerStroke: globalTokens.stroke.width.thickest,
-  };
-}

package/src/JSAvatar.styling.ts

@@ -1,159 +0,0 @@
-import {
-  JSAvatarName,
-  JSAvatarTokens,
-  AvatarConfigurableProps,
-  AvatarSlotProps,
-  JSAvatarProps,
-  AvatarColors,
-  AvatarSizesForTokens,
-  AvatarNamedColor,
-  ColorSchemes,
-  AvatarColorSchemes,
-} from './JSAvatar.types';
-import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { defaultJSAvatarTokens } from './JSAvatarTokens';
-import { ViewStyle } from 'react-native';
-import { getRingConfig } from './JSAvatar.helpers';
-import { borderStyles, fontStyles } from '@fluentui-react-native/tokens';
-
-const nameMap: { [key: string]: string } = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-};
-
-export const avatarStates: (keyof JSAvatarTokens)[] = [
-  ...AvatarColors,
-  ...AvatarSizesForTokens,
-  'neutral',
-  'brand',
-  'circular',
-  'square',
-  'inactive',
-  'ringColor',
-  'iconColor',
-  'iconSize',
-  'size',
-];
-
-const tokensThatAreAlsoProps: (keyof AvatarConfigurableProps)[] = ['avatarColor', 'initialsColor', 'ring'];
-
-export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
-  tokens: [defaultJSAvatarTokens, JSAvatarName],
-  tokensThatAreAlsoProps,
-  states: avatarStates,
-  slotProps: {
-    root: buildProps(
-      (tokens: JSAvatarTokens) => {
-        const { horizontalIconAlignment, verticalIconAlignment, size, avatarOpacity } = tokens;
-        return {
-          style: {
-            flexDirection: 'row',
-            width: size,
-            height: size,
-            justifyContent: nameMap[horizontalIconAlignment || 'end'] as ViewStyle['justifyContent'],
-            alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
-            horizontalIconAlignment,
-            verticalIconAlignment,
-            opacity: avatarOpacity,
-          },
-        };
-      },
-      ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'size'],
-    ),
-    initials: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        return {
-          style: {
-            ...fontStyles.from(tokens, theme),
-            color: tokens.initialsColor || tokens.color,
-            textAlign: 'center',
-          },
-        };
-      },
-      ['color', 'initialsColor', ...fontStyles.keys],
-    ),
-    initialsBackground: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        const { backgroundColor, size, avatarColor } = tokens;
-        const _avatarColor =
-          !avatarColor || AvatarColors.includes(avatarColor as AvatarNamedColor) || ColorSchemes.includes(avatarColor as AvatarColorSchemes)
-            ? backgroundColor
-            : avatarColor;
-
-        return {
-          style: {
-            ...borderStyles.from(tokens, theme),
-            width: size,
-            height: size,
-            flexGrow: 1,
-            alignSelf: 'stretch',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: _avatarColor,
-            borderWidth: tokens.borderWidth,
-            borderColor: tokens.borderColor,
-          },
-        };
-      },
-      ['avatarColor', 'backgroundColor', 'size', 'borderColor', 'borderWidth', ...borderStyles.keys],
-    ),
-    image: buildProps(
-      (tokens: JSAvatarTokens) => {
-        const { borderRadius, size, borderWidth, borderColor } = tokens;
-        return {
-          style: {
-            borderRadius: borderRadius,
-            width: size,
-            height: size,
-            borderWidth: borderWidth,
-            borderColor: borderColor,
-          },
-        };
-      },
-      ['borderRadius', 'size', 'borderColor', 'borderWidth'],
-    ),
-    icon: buildProps(
-      (tokens: JSAvatarTokens) => {
-        return {
-          style: {
-            position: 'absolute',
-            fontSize: tokens.iconSize,
-          },
-          color: tokens.color,
-          width: tokens.iconSize,
-          height: tokens.iconSize,
-        };
-      },
-      ['iconSize', 'iconColor'],
-    ),
-    ring: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        const ringConfig = getRingConfig(tokens.size);
-        return {
-          style: {
-            borderStyle: 'solid',
-            width: ringConfig.size,
-            height: ringConfig.size,
-            position: 'absolute',
-            top: -ringConfig.stroke * 2,
-            left: -ringConfig.stroke * 2,
-            ...borderStyles.from(tokens, theme),
-            borderWidth: ringConfig.stroke,
-            borderColor: tokens.ringColor,
-          },
-        };
-      },
-      ['size', 'ringColor', ...borderStyles.keys],
-    ),
-    badge: buildProps(
-      (tokens: JSAvatarTokens) => {
-        return {
-          size: tokens.badgeSize,
-          shape: 'circular',
-        };
-      },
-      ['badgeSize'],
-    ),
-  },
-};

package/src/JSAvatar.tsx

@@ -1,80 +0,0 @@
-/** @jsx withSlots */
-import { Image, View, Text, Platform } 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';
-import { PresenceBadge } from '@fluentui-react-native/badge';
-import { Icon } from '@fluentui-react-native/icon';
-import { createIconProps } from '@fluentui-react-native/interactive-hooks';
-import { SvgXml } from 'react-native-svg';
-
-/**
- * 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 => {
-  const size = userProps.size;
-  const avatarSize = size ? `size${size}` : '';
-  return (
-    state[layer] ||
-    userProps[layer] ||
-    layer === userProps['shape'] ||
-    (!userProps['shape'] && layer === 'circular') ||
-    layer === userProps['avatarColor'] ||
-    layer === avatarSize ||
-    (userProps.active === 'inactive' && layer === 'inactive')
-  );
-};
-
-export const JSAvatar = compose<JSAvatarType>({
-  displayName: JSAvatarName,
-  ...stylingSettings,
-  slots: {
-    root: View,
-    image: Image,
-    initials: Text,
-    initialsBackground: View,
-    icon: Icon,
-    ring: View,
-    badge: PresenceBadge,
-  },
-  useRender: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
-    const avatar = useAvatar(userProps);
-    const iconProps = createIconProps(userProps.icon);
-    const Slots = useSlots(avatar.props, (layer) => avatarLookup(layer, avatar.state, avatar.props));
-
-    return (final: JSAvatarProps) => {
-      const { activeAppearance, icon, initials, imageUrl, badge, ...mergedProps } = mergeProps(avatar.props, final);
-      const { showRing, transparentRing, showBadge } = avatar.state;
-      const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-      const fallBackIconXml = `<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z" fill="currentColor"/>
-      </svg>
-      `;
-      return (
-        <Slots.root {...mergedProps}>
-          {imageUrl ? (
-            <Slots.image source={{ uri: imageUrl }} />
-          ) : (
-            <Slots.initialsBackground accessible={false}>
-              {initials ? (
-                <Slots.initials accessible={false}>{initials}</Slots.initials>
-              ) : userProps.icon ? (
-                <Slots.icon {...iconProps} accessible={false} />
-              ) : (
-                svgIconsEnabled && <SvgXml xml={fallBackIconXml} />
-              )}
-            </Slots.initialsBackground>
-          )}
-          {showRing && !transparentRing && <Slots.ring />}
-          {svgIconsEnabled && showBadge && <Slots.badge {...badge} />}
-        </Slots.root>
-      );
-    };
-  },
-});

package/src/JSAvatar.types.ts

@@ -1,259 +0,0 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
-import { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
-import { BadgeProps, PresenceBadgeProps, BadgeSize } from '@fluentui-react-native/badge';
-import { IconProps, IconSourcesType } from '@fluentui-react-native/icon';
-
-export const JSAvatarName = 'Avatar';
-export const AvatarSizesForTokens = [
-  'size20',
-  'size24',
-  'size28',
-  'size32',
-  'size36',
-  'size40',
-  'size48',
-  'size56',
-  'size64',
-  'size72',
-  'size96',
-  'size120',
-] as const;
-
-export const AvatarSizes = [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120] as const;
-
-/**
- * Sets color of the avatar when there is no picture. Uses fluent color names
- */
-export const AvatarColors = [
-  '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',
-  'burgundy',
-  'hotPink',
-  'orchid',
-] as const;
-export const ColorSchemes = ['neutral', 'brand', 'colorful'] as const;
-export type AvatarSize = typeof AvatarSizes[number];
-export type AvatarNamedColor = typeof AvatarColors[number];
-export type AvatarColorSchemes = typeof ColorSchemes[number];
-
-export type AvatarShape = 'circular' | 'square';
-export type AvatarActive = 'active' | 'inactive' | 'unset';
-export type AvatarActiveAppearance = 'ring';
-export type AvatarColor = AvatarColorSchemes | AvatarNamedColor | ColorValue;
-export type IconAlignment = 'start' | 'center' | 'end';
-
-export interface RingConfig {
-  transparent?: boolean;
-  ringThickness?: number;
-  innerGap?: number;
-}
-
-export interface AvatarConfigurableProps {
-  /**
-   * The color when displaying either an icon or initials.
-   * * neutral (default): gray
-   * * brand: color from the brand palette
-   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
-   * * [AvatarNamedColor]: a specific color from the theme
-   *
-   * @defaultvalue neutral
-   */
-  avatarColor?: AvatarColor;
-  initialsColor?: ColorValue;
-  ring?: RingConfig;
-
-  /**
-   * Size of the avatar in pixels.
-   *
-   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
-   * based on design guidelines for the Avatar control.
-   *
-   * @defaultvalue 24
-   */
-  size?: AvatarSize;
-}
-
-export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
-  /**
-   * Optional activity indicator
-   * * active: the avatar will be decorated according to activeAppearance
-   * * inactive: the avatar will be reduced in size and partially transparent
-   * * unset: normal display
-   *
-   * @defaultvalue unset
-   */
-  active?: AvatarActive;
-
-  /**
-   * The appearance when `active="active"`
-   *
-   * @defaultvalue ring
-   */
-  activeAppearance?: AvatarActiveAppearance;
-
-  /**
-   * Badge shows the avatar's presence status.
-   * Badge can be shown only if `active` prop is undefined or unset
-   */
-  badge?: PresenceBadgeProps;
-
-  /**
-   * Icon to be displayed when the avatar doesn't have an image or initials.
-   *
-   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
-   */
-  icon?: IconSourcesType;
-
-  /**
-   * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
-   * Use this when a name is not available, but there is another unique identifier that can be used instead.
-   */
-  idForColor?: string;
-
-  /**
-   * (optional) Custom initials.
-   *
-   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
-   * using the `getInitials` function.
-   *
-   * The initials are displayed when there is no image (including while the image is loading).
-   */
-  initials?: string;
-
-  /**
-   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
-   *
-   * The name will be used to determine the initials displayed when there is no icon, as well as provided to
-   * accessibility tools.
-   */
-  name?: string;
-
-  /**
-   * The avatar can have a circular or square shape.
-   * @defaultvalue circular
-   */
-  shape?: AvatarShape;
-
-  /**
-   * Shorthand for passing image URL instead of using `image` prop
-   */
-  imageUrl?: string;
-}
-
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
-  iconColor?: ColorValue;
-  iconSize?: number;
-  horizontalIconAlignment?: IconAlignment;
-  verticalIconAlignment?: IconAlignment;
-  circular?: JSAvatarTokens;
-  ringColor?: ColorValue;
-  ringBackgroundColor?: ColorValue;
-  square?: JSAvatarTokens;
-  inactive?: JSAvatarTokens;
-  avatarOpacity?: number;
-  size20?: JSAvatarTokens;
-  size24?: JSAvatarTokens;
-  size28?: JSAvatarTokens;
-  size32?: JSAvatarTokens;
-  size36?: JSAvatarTokens;
-  size40?: JSAvatarTokens;
-  size48?: JSAvatarTokens;
-  size56?: JSAvatarTokens;
-  size64?: JSAvatarTokens;
-  size72?: JSAvatarTokens;
-  size96?: JSAvatarTokens;
-  size120?: JSAvatarTokens;
-  badgeSize?: BadgeSize;
-  neutral?: JSAvatarTokens;
-  brand?: JSAvatarTokens;
-  darkRed?: JSAvatarTokens;
-  cranberry?: JSAvatarTokens;
-  red?: JSAvatarTokens;
-  pumpkin?: JSAvatarTokens;
-  peach?: JSAvatarTokens;
-  marigold?: JSAvatarTokens;
-  gold?: JSAvatarTokens;
-  brass?: JSAvatarTokens;
-  brown?: JSAvatarTokens;
-  forest?: JSAvatarTokens;
-  seafoam?: JSAvatarTokens;
-  darkGreen?: JSAvatarTokens;
-  lightTeal?: JSAvatarTokens;
-  teal?: JSAvatarTokens;
-  steel?: JSAvatarTokens;
-  blue?: JSAvatarTokens;
-  royalBlue?: JSAvatarTokens;
-  cornflower?: JSAvatarTokens;
-  navy?: JSAvatarTokens;
-  lavender?: JSAvatarTokens;
-  purple?: JSAvatarTokens;
-  grape?: JSAvatarTokens;
-  lilac?: JSAvatarTokens;
-  pink?: JSAvatarTokens;
-  magenta?: JSAvatarTokens;
-  plum?: JSAvatarTokens;
-  beige?: JSAvatarTokens;
-  mink?: JSAvatarTokens;
-  platinum?: JSAvatarTokens;
-  anchor?: JSAvatarTokens;
-  burgundy?: JSAvatarTokens;
-  hotPink?: JSAvatarTokens;
-  orchid?: JSAvatarTokens;
-}
-
-export interface AvatarSlotProps {
-  root: ViewProps;
-  image: ImageProps;
-  initials: TextProps;
-  initialsBackground: ViewProps;
-  icon: IconProps;
-  ring: ViewProps;
-  badge: BadgeProps;
-}
-
-export interface JSAvatarState {
-  showRing: boolean;
-  transparentRing: boolean;
-  showBadge: boolean;
-}
-
-export interface AvatarInfo {
-  props: JSAvatarProps;
-  state: JSAvatarState;
-}
-
-export interface JSAvatarType {
-  props: JSAvatarProps;
-  slotProps: AvatarSlotProps;
-  tokens: JSAvatarTokens;
-  state: JSAvatarState;
-}