@vkontakte/vkui 5.0.0 → 5.0.1

package/dist/components/AppearanceProvider/AppearanceProvider.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
 export interface AppearanceProviderProps {
-    appearance?: AppearanceType;
-    children?: React.ReactNode;
+    appearance: AppearanceType;
+    children: React.ReactNode;
 }
 export declare const generateVKUITokensClassName: (platform: string, appearance: string) => string;
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export declare const AppearanceProvider: ({ children, appearance, }: AppearanceProviderProps) => JSX.Element;
+export declare const AppearanceProvider: ({ appearance, children, }: AppearanceProviderProps) => JSX.Element;

package/dist/components/AppearanceProvider/AppearanceProvider.js

@@ -1,49 +1,41 @@
-import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { AppearanceProviderContext } from "./AppearanceProviderContext";
 import { classNamesString } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
+import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride";
 export var generateVKUITokensClassName = function generateVKUITokensClassName(platform, appearance) {
   var tokensPlatform;
-
   switch (platform) {
     case Platform.ANDROID:
       tokensPlatform = "vkBase";
       break;
-
     case Platform.IOS:
       tokensPlatform = "vkIOS";
       break;
-
     case Platform.VKCOM:
       tokensPlatform = "vkCom";
       break;
-
     default:
       tokensPlatform = platform;
   }
-
   return "vkui--".concat(tokensPlatform, "--").concat(appearance);
 };
+
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-
 export var AppearanceProvider = function AppearanceProvider(_ref) {
-  var children = _ref.children,
-      _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "light" : _ref$appearance;
+  var appearance = _ref.appearance,
+    children = _ref.children;
   var platform = usePlatform();
-  return createScopedElement(AppearanceProviderContext.Provider, {
-    value: appearance
+  return /*#__PURE__*/React.createElement(ConfigProviderOverride, {
+    appearance: appearance
   }, React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       return /*#__PURE__*/React.cloneElement(child, {
         className: classNamesString(child.props.className, generateVKUITokensClassName(platform, appearance))
       });
     }
-
     return child;
   }));
 };

package/dist/components/AppearanceProvider/AppearanceProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceProvider.js","names":["React","AppearanceProviderContext","classNamesString","usePlatform","Platform","generateVKUITokensClassName","platform","appearance","tokensPlatform","ANDROID","IOS","VKCOM","AppearanceProvider","children","Children","map","child","isValidElement","cloneElement","className","props"],"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { AppearanceProviderContext } from \"./AppearanceProviderContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\n\nexport interface AppearanceProviderProps {\n  appearance?: AppearanceType;\n  children?: React.ReactNode;\n}\n\nexport const generateVKUITokensClassName = (\n  platform: string,\n  appearance: string\n): string => {\n  let tokensPlatform;\n  switch (platform) {\n    case Platform.ANDROID:\n      tokensPlatform = \"vkBase\";\n      break;\n    case Platform.IOS:\n      tokensPlatform = \"vkIOS\";\n      break;\n    case Platform.VKCOM:\n      tokensPlatform = \"vkCom\";\n      break;\n    default:\n      tokensPlatform = platform;\n  }\n\n  return `vkui--${tokensPlatform}--${appearance}`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({\n  children,\n  appearance = \"light\",\n}: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <AppearanceProviderContext.Provider value={appearance}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            className: classNamesString(\n              child.props.className,\n              generateVKUITokensClassName(platform, appearance)\n            ),\n          });\n        }\n        return child;\n      })}\n    </AppearanceProviderContext.Provider>\n  );\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,yBAAT;AACA,SAASC,gBAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AAOA,OAAO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA8B,CACzCC,QADyC,EAEzCC,UAFyC,EAG9B;EACX,IAAIC,cAAJ;;EACA,QAAQF,QAAR;IACE,KAAKF,QAAQ,CAACK,OAAd;MACED,cAAc,GAAG,QAAjB;MACA;;IACF,KAAKJ,QAAQ,CAACM,GAAd;MACEF,cAAc,GAAG,OAAjB;MACA;;IACF,KAAKJ,QAAQ,CAACO,KAAd;MACEH,cAAc,GAAG,OAAjB;MACA;;IACF;MACEA,cAAc,GAAGF,QAAjB;EAXJ;;EAcA,uBAAgBE,cAAhB,eAAmCD,UAAnC;AACD,CApBM;AAsBP;AACA;AACA;;AACA,OAAO,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB,OAGH;EAAA,IAF7BC,QAE6B,QAF7BA,QAE6B;EAAA,2BAD7BN,UAC6B;EAAA,IAD7BA,UAC6B,gCADhB,OACgB;EAC7B,IAAMD,QAAQ,GAAGH,WAAW,EAA5B;EAEA,OACE,oBAAC,yBAAD,CAA2B,QAA3B;IAAoC,KAAK,EAAEI;EAA3C,GACGP,KAAK,CAACc,QAAN,CAAeC,GAAf,CAAmBF,QAAnB,EAA6B,UAACG,KAAD,EAAW;IACvC,kBAAIhB,KAAK,CAACiB,cAAN,CAAqBD,KAArB,CAAJ,EAAiC;MAC/B,oBAAOhB,KAAK,CAACkB,YAAN,CAAmBF,KAAnB,EAA0B;QAC/BG,SAAS,EAAEjB,gBAAgB,CACzBc,KAAK,CAACI,KAAN,CAAYD,SADa,EAEzBd,2BAA2B,CAACC,QAAD,EAAWC,UAAX,CAFF;MADI,CAA1B,CAAP;IAMD;;IACD,OAAOS,KAAP;EACD,CAVA,CADH,CADF;AAeD,CArBM"}
+{"version":3,"file":"AppearanceProvider.js","names":["React","classNamesString","usePlatform","Platform","ConfigProviderOverride","generateVKUITokensClassName","platform","appearance","tokensPlatform","ANDROID","IOS","VKCOM","AppearanceProvider","children","Children","map","child","isValidElement","cloneElement","className","props"],"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { ConfigProviderOverride } from \"../ConfigProvider/ConfigProviderOverride\";\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\nexport const generateVKUITokensClassName = (\n  platform: string,\n  appearance: string\n): string => {\n  let tokensPlatform;\n  switch (platform) {\n    case Platform.ANDROID:\n      tokensPlatform = \"vkBase\";\n      break;\n    case Platform.IOS:\n      tokensPlatform = \"vkIOS\";\n      break;\n    case Platform.VKCOM:\n      tokensPlatform = \"vkCom\";\n      break;\n    default:\n      tokensPlatform = platform;\n  }\n\n  return `vkui--${tokensPlatform}--${appearance}`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({\n  appearance,\n  children,\n}: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement<{ className?: string }>(child)) {\n          return React.cloneElement(child, {\n            className: classNamesString(\n              child.props.className,\n              generateVKUITokensClassName(platform, appearance)\n            ),\n          });\n        }\n        return child;\n      })}\n    </ConfigProviderOverride>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,sBAAsB,QAAQ,0CAA0C;AAOjF,OAAO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2B,CACtCC,QAAgB,EAChBC,UAAkB,EACP;EACX,IAAIC,cAAc;EAClB,QAAQF,QAAQ;IACd,KAAKH,QAAQ,CAACM,OAAO;MACnBD,cAAc,GAAG,QAAQ;MACzB;IACF,KAAKL,QAAQ,CAACO,GAAG;MACfF,cAAc,GAAG,OAAO;MACxB;IACF,KAAKL,QAAQ,CAACQ,KAAK;MACjBH,cAAc,GAAG,OAAO;MACxB;IACF;MACEA,cAAc,GAAGF,QAAQ;EAAC;EAG9B,uBAAgBE,cAAc,eAAKD,UAAU;AAC/C,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMK,kBAAkB,GAAG,SAArBA,kBAAkB,OAGA;EAAA,IAF7BL,UAAU,QAAVA,UAAU;IACVM,QAAQ,QAARA,QAAQ;EAER,IAAMP,QAAQ,GAAGJ,WAAW,EAAE;EAE9B,oBACE,oBAAC,sBAAsB;IAAC,UAAU,EAAEK;EAAW,GAC5CP,KAAK,CAACc,QAAQ,CAACC,GAAG,CAACF,QAAQ,EAAE,UAACG,KAAK,EAAK;IACvC,kBAAIhB,KAAK,CAACiB,cAAc,CAAyBD,KAAK,CAAC,EAAE;MACvD,oBAAOhB,KAAK,CAACkB,YAAY,CAACF,KAAK,EAAE;QAC/BG,SAAS,EAAElB,gBAAgB,CACzBe,KAAK,CAACI,KAAK,CAACD,SAAS,EACrBd,2BAA2B,CAACC,QAAQ,EAAEC,UAAU,CAAC;MAErD,CAAC,CAAC;IACJ;IACA,OAAOS,KAAK;EACd,CAAC,CAAC,CACqB;AAE7B,CAAC"}

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-import { type ImageBaseProps, type ImageBaseBadgeProps } from "../ImageBase/ImageBase";
+import { type ImageBaseProps, type ImageBaseOverlayProps } from "../ImageBase/ImageBase";
+import { type AvatarBadgeProps } from "./AvatarBadge/AvatarBadge";
+import { type AvatarBadgeWithPresetProps } from "./AvatarBadge/AvatarBadgeWithPreset";
+export type { AvatarBadgeProps, AvatarBadgeWithPresetProps, ImageBaseOverlayProps as AvatarOverlayProps, };
+export declare const AVATAR_DEFAULT_SIZE = 48;
 declare const COLORS_NUMBER_TO_TEXT_MAP: {
     readonly 1: "red";
     readonly 2: "orange";
@@ -8,22 +12,21 @@ declare const COLORS_NUMBER_TO_TEXT_MAP: {
     readonly 5: "l-blue";
     readonly 6: "violet";
 };
-export declare const AVATAR_DEFAULT_SIZE = 48;
 /**
  * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
  * @example user.id % 6 + 1
  */
 export declare type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;
 export declare type InitialsAvatarTextGradients = typeof COLORS_NUMBER_TO_TEXT_MAP[InitialsAvatarNumberGradients] | "blue";
-export interface AvatarProps extends Omit<ImageBaseProps, "badge"> {
+export interface AvatarProps extends ImageBaseProps {
     /**
-     * > Не показывается при `size < 24`
+     * Инициалы пользователя.
      *
-     * Бейдж в правом нижнем углу компонента.
+     * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.
      *
-     * Можно передать алиасы, конструктор иконки или конфигурацию.
+     * > ⚠️ Перебивает `fallbackIcon`.
      */
-    badge?: "online" | "online-mobile" | ImageBaseBadgeProps["Icon"] | ImageBaseBadgeProps;
+    initials?: string;
     /**
      * Задаёт градиент для фона.
      *
@@ -44,5 +47,9 @@ export interface AvatarProps extends Omit<ImageBaseProps, "badge"> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
-export declare const Avatar: ({ size, className, badge: badgeProp, gradientColor, children, FallbackIcon, ...restProps }: AvatarProps) => JSX.Element;
-export {};
+export declare const Avatar: {
+    ({ size, className, gradientColor, initials, fallbackIcon, children, ...restProps }: AvatarProps): JSX.Element;
+    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => JSX.Element;
+    BadgeWithPreset: ({ preset, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;
+    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
+};

package/dist/components/Avatar/Avatar.js

@@ -1,40 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "className", "badge", "gradientColor", "children", "FallbackIcon"];
-import { createScopedElement } from "../../lib/jsxRuntime";
-import { Icon28Users } from "@vkontakte/icons";
+var _excluded = ["size", "className", "gradientColor", "initials", "fallbackIcon", "children"];
+import * as React from "react";
 import { classNamesString } from "../../lib/classNames";
 import { ImageBase } from "../ImageBase/ImageBase";
 import { getInitialsFontSize } from "./helpers";
-import { Icon12Circle, Icon12OnlineMobile } from "./icons";
-var styles = {
-  "Avatar": "vkuiAvatar",
-  "Avatar--has-gradient": "vkuiAvatar--has-gradient",
-  "Avatar--gradient-red": "vkuiAvatar--gradient-red",
-  "Avatar--gradient-pink": "vkuiAvatar--gradient-pink",
-  "Avatar--gradient-orange": "vkuiAvatar--gradient-orange",
-  "Avatar--gradient-yellow": "vkuiAvatar--gradient-yellow",
-  "Avatar--gradient-green": "vkuiAvatar--gradient-green",
-  "Avatar--gradient-l-blue": "vkuiAvatar--gradient-l-blue",
-  "Avatar--gradient-blue": "vkuiAvatar--gradient-blue",
-  "Avatar--gradient-violet": "vkuiAvatar--gradient-violet",
-  "Avatar__content": "vkuiAvatar__content",
-  "Avatar__badge": "vkuiAvatar__badge",
-  "Avatar__badge--shifted": "vkuiAvatar__badge--shifted",
-  "Avatar__badge--online": "vkuiAvatar__badge--online",
-  "Avatar__badge--online-mobile": "vkuiAvatar__badge--online-mobile"
-};
-var BADGE_ONLINE = {
-  className: classNamesString(styles["Avatar__badge"], styles["Avatar__badge--online"]),
-  background: "stroke",
-  Icon: Icon12Circle
-};
-var BADGE_ONLINE_MOBILE = {
-  className: classNamesString(styles["Avatar__badge"], styles["Avatar__badge--online-mobile"]),
-  background: "stroke",
-  Icon: Icon12OnlineMobile
-};
+import { AvatarBadge } from "./AvatarBadge/AvatarBadge";
+import { AvatarBadgeWithPreset } from "./AvatarBadge/AvatarBadgeWithPreset";
+export var AVATAR_DEFAULT_SIZE = 48;
 var COLORS_NUMBER_TO_TEXT_MAP = {
   1: "red",
   2: "orange",
@@ -43,59 +16,48 @@ var COLORS_NUMBER_TO_TEXT_MAP = {
   5: "l-blue",
   6: "violet"
 };
-export var AVATAR_DEFAULT_SIZE = 48;
+
 /**
  * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
  * @example user.id % 6 + 1
  */
 
+var gradientStyles = {
+  red: "vkuiAvatar--gradient-red",
+  orange: "vkuiAvatar--gradient-orange",
+  yellow: "vkuiAvatar--gradient-yellow",
+  green: "vkuiAvatar--gradient-green",
+  blue: "vkuiAvatar--gradient-blue",
+  "l-blue": "vkuiAvatar--gradient-l-blue",
+  violet: "vkuiAvatar--gradient-violet"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
 export var Avatar = function Avatar(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? AVATAR_DEFAULT_SIZE : _ref$size,
-      className = _ref.className,
-      badgeProp = _ref.badge,
-      gradientColor = _ref.gradientColor,
-      children = _ref.children,
-      _ref$FallbackIcon = _ref.FallbackIcon,
-      FallbackIcon = _ref$FallbackIcon === void 0 ? Icon28Users : _ref$FallbackIcon,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref$size === void 0 ? AVATAR_DEFAULT_SIZE : _ref$size,
+    className = _ref.className,
+    gradientColor = _ref.gradientColor,
+    initials = _ref.initials,
+    fallbackIcon = _ref.fallbackIcon,
+    children = _ref.children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var gradientName = typeof gradientColor === "number" ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;
-  var badge = undefined;
-
-  switch (badgeProp) {
-    case undefined:
-      break;
-
-    case "online":
-      badge = BADGE_ONLINE;
-      break;
-
-    case "online-mobile":
-      badge = BADGE_ONLINE_MOBILE;
-      break;
-
-    default:
-      badge = _objectSpread(_objectSpread({}, typeof badgeProp === "function" ? {
-        Icon: badgeProp
-      } : badgeProp), {}, {
-        className: classNamesString(styles["Avatar__badge"], size < 96 && styles["Avatar__badge--shifted"])
-      });
-  }
-
-  return createScopedElement(ImageBase, _extends({}, restProps, {
+  var isGradientNotCustom = gradientName && gradientName !== "custom";
+  var rewrittenFallbackIcon = initials ? undefined : fallbackIcon;
+  return /*#__PURE__*/React.createElement(ImageBase, _extends({}, restProps, {
     size: size,
-    badge: badge,
-    className: classNamesString(styles["Avatar"], gradientName && styles["Avatar--has-gradient"], gradientName !== "custom" && styles["Avatar--gradient-".concat(gradientName)], className),
-    FallbackIcon: FallbackIcon
-  }), children && createScopedElement("div", {
-    className: styles["Avatar__content"],
+    fallbackIcon: rewrittenFallbackIcon,
+    className: classNamesString("vkuiAvatar", gradientName && "vkuiAvatar--has-gradient", isGradientNotCustom && gradientStyles[gradientName], className)
+  }), initials && /*#__PURE__*/React.createElement("div", {
+    className: "vkuiAvatar__initials",
     style: {
       fontSize: getInitialsFontSize(size)
     }
-  }, children));
+  }, initials), children);
 };
+Avatar.Badge = AvatarBadge;
+Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
+Avatar.Overlay = ImageBase.Overlay;
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Icon28Users","classNamesString","ImageBase","getInitialsFontSize","Icon12Circle","Icon12OnlineMobile","BADGE_ONLINE","className","styles","background","Icon","BADGE_ONLINE_MOBILE","COLORS_NUMBER_TO_TEXT_MAP","AVATAR_DEFAULT_SIZE","Avatar","size","badgeProp","badge","gradientColor","children","FallbackIcon","restProps","gradientName","undefined","fontSize"],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { Icon28Users } from \"@vkontakte/icons\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  type ImageBaseProps,\n  type ImageBaseBadgeProps,\n  ImageBase,\n} from \"../ImageBase/ImageBase\";\nimport { getInitialsFontSize } from \"./helpers\";\nimport { Icon12Circle, Icon12OnlineMobile } from \"./icons\";\nimport styles from \"./Avatar.module.css\";\n\nconst BADGE_ONLINE = {\n  className: classNamesString(\n    styles[\"Avatar__badge\"],\n    styles[`Avatar__badge--online`]\n  ),\n  background: \"stroke\" as const,\n  Icon: Icon12Circle,\n};\n\nconst BADGE_ONLINE_MOBILE = {\n  className: classNamesString(\n    styles[\"Avatar__badge\"],\n    styles[`Avatar__badge--online-mobile`]\n  ),\n  background: \"stroke\" as const,\n  Icon: Icon12OnlineMobile,\n};\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: \"red\",\n  2: \"orange\",\n  3: \"yellow\",\n  4: \"green\",\n  5: \"l-blue\",\n  6: \"violet\",\n} as const;\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients =\n  keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | typeof COLORS_NUMBER_TO_TEXT_MAP[InitialsAvatarNumberGradients]\n  | \"blue\";\n\nexport interface AvatarProps extends Omit<ImageBaseProps, \"badge\"> {\n  /**\n   * > Не показывается при `size < 24`\n   *\n   * Бейдж в правом нижнем углу компонента.\n   *\n   * Можно передать алиасы, конструктор иконки или конфигурацию.\n   */\n  badge?:\n    | \"online\"\n    | \"online-mobile\"\n    | ImageBaseBadgeProps[\"Icon\"]\n    | ImageBaseBadgeProps;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?:\n    | InitialsAvatarNumberGradients\n    | InitialsAvatarTextGradients\n    | \"custom\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  badge: badgeProp,\n  gradientColor,\n  children,\n  FallbackIcon = Icon28Users,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === \"number\"\n      ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor]\n      : gradientColor;\n\n  let badge: ImageBaseProps[\"badge\"] | undefined = undefined;\n  switch (badgeProp) {\n    case undefined:\n      break;\n    case \"online\":\n      badge = BADGE_ONLINE;\n      break;\n    case \"online-mobile\":\n      badge = BADGE_ONLINE_MOBILE;\n      break;\n    default:\n      badge = {\n        ...(typeof badgeProp === \"function\" ? { Icon: badgeProp } : badgeProp),\n        className: classNamesString(\n          styles[\"Avatar__badge\"],\n          size < 96 && styles[\"Avatar__badge--shifted\"]\n        ),\n      };\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      badge={badge}\n      className={classNamesString(\n        styles[\"Avatar\"],\n        gradientName && styles[`Avatar--has-gradient`],\n        gradientName !== \"custom\" && styles[`Avatar--gradient-${gradientName}`],\n        className\n      )}\n      FallbackIcon={FallbackIcon}\n    >\n      {children && (\n        <div\n          className={styles[\"Avatar__content\"]}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {children}\n        </div>\n      )}\n    </ImageBase>\n  );\n};\n"],"mappings":";;;;;AAAA,SAASA,WAAT,QAA4B,kBAA5B;AACA,SAASC,gBAAT;AACA,SAGEC,SAHF;AAKA,SAASC,mBAAT;AACA,SAASC,YAAT,EAAuBC,kBAAvB;;;;;;;;;;;;;;;;;;AAGA,IAAMC,YAAY,GAAG;EACnBC,SAAS,EAAEN,gBAAgB,CACzBO,MAAM,CAAC,eAAD,CADmB,EAEzBA,MAAM,yBAFmB,CADR;EAKnBC,UAAU,EAAE,QALO;EAMnBC,IAAI,EAAEN;AANa,CAArB;AASA,IAAMO,mBAAmB,GAAG;EAC1BJ,SAAS,EAAEN,gBAAgB,CACzBO,MAAM,CAAC,eAAD,CADmB,EAEzBA,MAAM,gCAFmB,CADD;EAK1BC,UAAU,EAAE,QALc;EAM1BC,IAAI,EAAEL;AANoB,CAA5B;AASA,IAAMO,yBAAyB,GAAG;EAChC,GAAG,KAD6B;EAEhC,GAAG,QAF6B;EAGhC,GAAG,QAH6B;EAIhC,GAAG,OAJ6B;EAKhC,GAAG,QAL6B;EAMhC,GAAG;AAN6B,CAAlC;AASA,OAAO,IAAMC,mBAAmB,GAAG,EAA5B;AAEP;AACA;AACA;AACA;;AA0CA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAQH;EAAA,qBAPjBC,IAOiB;EAAA,IAPjBA,IAOiB,0BAPVF,mBAOU;EAAA,IANjBN,SAMiB,QANjBA,SAMiB;EAAA,IALVS,SAKU,QALjBC,KAKiB;EAAA,IAJjBC,aAIiB,QAJjBA,aAIiB;EAAA,IAHjBC,QAGiB,QAHjBA,QAGiB;EAAA,6BAFjBC,YAEiB;EAAA,IAFjBA,YAEiB,kCAFFpB,WAEE;EAAA,IADdqB,SACc;;EACjB,IAAMC,YAAY,GAChB,OAAOJ,aAAP,KAAyB,QAAzB,GACIN,yBAAyB,CAACM,aAAD,CAD7B,GAEIA,aAHN;EAKA,IAAID,KAA0C,GAAGM,SAAjD;;EACA,QAAQP,SAAR;IACE,KAAKO,SAAL;MACE;;IACF,KAAK,QAAL;MACEN,KAAK,GAAGX,YAAR;MACA;;IACF,KAAK,eAAL;MACEW,KAAK,GAAGN,mBAAR;MACA;;IACF;MACEM,KAAK,mCACC,OAAOD,SAAP,KAAqB,UAArB,GAAkC;QAAEN,IAAI,EAAEM;MAAR,CAAlC,GAAwDA,SADzD;QAEHT,SAAS,EAAEN,gBAAgB,CACzBO,MAAM,CAAC,eAAD,CADmB,EAEzBO,IAAI,GAAG,EAAP,IAAaP,MAAM,CAAC,wBAAD,CAFM;MAFxB,EAAL;EAVJ;;EAmBA,OACE,oBAAC,SAAD,eACMa,SADN;IAEE,IAAI,EAAEN,IAFR;IAGE,KAAK,EAAEE,KAHT;IAIE,SAAS,EAAEhB,gBAAgB,CACzBO,MAAM,CAAC,QAAD,CADmB,EAEzBc,YAAY,IAAId,MAAM,wBAFG,EAGzBc,YAAY,KAAK,QAAjB,IAA6Bd,MAAM,4BAAqBc,YAArB,EAHV,EAIzBf,SAJyB,CAJ7B;IAUE,YAAY,EAAEa;EAVhB,IAYGD,QAAQ,IACP;IACE,SAAS,EAAEX,MAAM,CAAC,iBAAD,CADnB;IAEE,KAAK,EAAE;MACLgB,QAAQ,EAAErB,mBAAmB,CAACY,IAAD;IADxB;EAFT,GAMGI,QANH,CAbJ,CADF;AAyBD,CA3DM"}
+{"version":3,"file":"Avatar.js","names":["React","classNamesString","ImageBase","getInitialsFontSize","AvatarBadge","AvatarBadgeWithPreset","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","red","orange","yellow","green","blue","violet","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","fontSize","Badge","BadgeWithPreset","Overlay"],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  type ImageBaseProps,\n  type ImageBaseOverlayProps,\n  ImageBase,\n} from \"../ImageBase/ImageBase\";\nimport { getInitialsFontSize } from \"./helpers\";\nimport { type AvatarBadgeProps, AvatarBadge } from \"./AvatarBadge/AvatarBadge\";\nimport {\n  type AvatarBadgeWithPresetProps,\n  AvatarBadgeWithPreset,\n} from \"./AvatarBadge/AvatarBadgeWithPreset\";\nimport styles from \"./Avatar.module.css\";\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: \"red\",\n  2: \"orange\",\n  3: \"yellow\",\n  4: \"green\",\n  5: \"l-blue\",\n  6: \"violet\",\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients =\n  keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | typeof COLORS_NUMBER_TO_TEXT_MAP[InitialsAvatarNumberGradients]\n  | \"blue\";\n\nconst gradientStyles = {\n  red: styles[\"Avatar--gradient-red\"],\n  orange: styles[\"Avatar--gradient-orange\"],\n  yellow: styles[\"Avatar--gradient-yellow\"],\n  green: styles[\"Avatar--gradient-green\"],\n  blue: styles[\"Avatar--gradient-blue\"],\n  \"l-blue\": styles[\"Avatar--gradient-l-blue\"],\n  violet: styles[\"Avatar--gradient-violet\"],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?:\n    | InitialsAvatarNumberGradients\n    | InitialsAvatarTextGradients\n    | \"custom\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === \"number\"\n      ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor]\n      : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== \"custom\";\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNamesString(\n        styles[\"Avatar\"],\n        gradientName && styles[`Avatar--has-gradient`],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className\n      )}\n    >\n      {initials && (\n        <div\n          className={styles[\"Avatar__initials\"]}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAGEC,SAAS,QACJ,wBAAwB;AAC/B,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAAgCC,WAAW,QAAQ,2BAA2B;AAC9E,SAEEC,qBAAqB,QAChB,qCAAqC;AAS5C,OAAO,IAAMC,mBAAmB,GAAG,EAAE;AAErC,IAAMC,yBAAyB,GAAG;EAChC,CAAC,EAAE,KAAK;EACR,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE,OAAO;EACV,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE;AACL,CAAU;;AAEV;AACA;AACA;AACA;;AAQA,IAAMC,cAAc,GAAG;EACrBC,GAAG,4BAAgC;EACnCC,MAAM,+BAAmC;EACzCC,MAAM,+BAAmC;EACzCC,KAAK,8BAAkC;EACvCC,IAAI,6BAAiC;EACrC,QAAQ,+BAAmC;EAC3CC,MAAM;AACR,CAAC;AAgCD;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAQA;EAAA,qBAPjBC,IAAI;IAAJA,IAAI,0BAAGV,mBAAmB;IAC1BW,SAAS,QAATA,SAAS;IACTC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,YAAY,GAChB,OAAOL,aAAa,KAAK,QAAQ,GAC7BX,yBAAyB,CAACW,aAAa,CAAC,GACxCA,aAAa;EACnB,IAAMM,mBAAmB,GAAGD,YAAY,IAAIA,YAAY,KAAK,QAAQ;EACrE,IAAME,qBAAqB,GAAGN,QAAQ,GAAGO,SAAS,GAAGN,YAAY;EAEjE,oBACE,oBAAC,SAAS,eACJE,SAAS;IACb,IAAI,EAAEN,IAAK;IACX,YAAY,EAAES,qBAAsB;IACpC,SAAS,EAAExB,gBAAgB,eAEzBsB,YAAY,8BAAkC,EAC9CC,mBAAmB,IAAIhB,cAAc,CAACe,YAAY,CAAC,EACnDN,SAAS;EACT,IAEDE,QAAQ,iBACP;IACE,SAAS,wBAA6B;IACtC,KAAK,EAAE;MACLQ,QAAQ,EAAExB,mBAAmB,CAACa,IAAI;IACpC;EAAE,GAEDG,QAAQ,CAEZ,EACAE,QAAQ,CACC;AAEhB,CAAC;AAEDN,MAAM,CAACa,KAAK,GAAGxB,WAAW;AAE1BW,MAAM,CAACc,eAAe,GAAGxB,qBAAqB;AAE9CU,MAAM,CAACe,OAAO,GAAG5B,SAAS,CAAC4B,OAAO"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type ImageBaseBadgeProps } from "../../ImageBase/ImageBase";
+export declare type AvatarBadgeProps = ImageBaseBadgeProps;
+export declare const AvatarBadge: ({ className, ...restProps }: AvatarBadgeProps) => JSX.Element;

package/dist/components/Avatar/AvatarBadge/AvatarBadge.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"];
+import * as React from "react";
+import { classNamesString } from "../../../lib/classNames";
+import { ImageBase, ImageBaseContext } from "../../ImageBase/ImageBase";
+export var AvatarBadge = function AvatarBadge(_ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useContext = React.useContext(ImageBaseContext),
+    size = _React$useContext.size;
+  return /*#__PURE__*/React.createElement(ImageBase.Badge, _extends({}, restProps, {
+    className: classNamesString("vkuiAvatarBadge", size < 96 && "vkuiAvatarBadge--shifted", className)
+  }));
+};
+//# sourceMappingURL=AvatarBadge.js.map

package/dist/components/Avatar/AvatarBadge/AvatarBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBadge.js","names":["React","classNamesString","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","useContext","size"],"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n} from \"../../ImageBase/ImageBase\";\nimport styles from \"./AvatarBadge.module.css\";\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNamesString(\n        styles[\"AvatarBadge\"],\n        size < 96 && styles[\"AvatarBadge--shifted\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAEEC,SAAS,EACTC,gBAAgB,QACX,2BAA2B;AAKlC,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAAsD;EAAA,IAAhDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACnD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,gBAAgB,oBAEzBO,IAAI,GAAG,EAAE,8BAAkC,EAC3CH,SAAS;EACT,GACF;AAEN,CAAC"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type ImageBaseBadgeProps } from "../../ImageBase/ImageBase";
+export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, "background" | "children"> {
+    /**
+     * Использует предзаданные настройки.
+     *
+     * За каждым пресетом закреплена своя иконка и стили.
+     */
+    preset?: "online" | "online-mobile";
+}
+export declare const AvatarBadgeWithPreset: ({ preset, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;

package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["preset"];
+import * as React from "react";
+import { classNamesString } from "../../../lib/classNames";
+import { ImageBase, ImageBaseContext, getBadgeIconSizeByImageBaseSize } from "../../ImageBase/ImageBase";
+import { Icon12Circle, Icon12OnlineMobile } from "./icons";
+export var AvatarBadgeWithPreset = function AvatarBadgeWithPreset(_ref) {
+  var _ref$preset = _ref.preset,
+    preset = _ref$preset === void 0 ? "online" : _ref$preset,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useContext = React.useContext(ImageBaseContext),
+    size = _React$useContext.size;
+  var badgeSize = getBadgeIconSizeByImageBaseSize(size);
+  var isOnlinePreset = preset === "online";
+  var presetClassName = isOnlinePreset ? "vkuiAvatarBadge--preset-online" : "vkuiAvatarBadge--preset-onlineMobile";
+  var Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;
+  return /*#__PURE__*/React.createElement(ImageBase.Badge, _extends({}, restProps, {
+    background: "stroke",
+    className: classNamesString("vkuiAvatarBadge", presetClassName)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    width: badgeSize,
+    height: badgeSize
+  }));
+};
+//# sourceMappingURL=AvatarBadgeWithPreset.js.map

package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBadgeWithPreset.js","names":["React","classNamesString","ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","restProps","useContext","size","badgeSize","isOnlinePreset","presetClassName","Icon"],"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n  getBadgeIconSizeByImageBaseSize,\n} from \"../../ImageBase/ImageBase\";\nimport { Icon12Circle, Icon12OnlineMobile } from \"./icons\";\nimport styles from \"./AvatarBadge.module.css\";\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, \"background\" | \"children\"> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: \"online\" | \"online-mobile\";\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = \"online\",\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === \"online\";\n  const presetClassName = isOnlinePreset\n    ? styles[`AvatarBadge--preset-online`]\n    : styles[`AvatarBadge--preset-onlineMobile`];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      background=\"stroke\"\n      className={classNamesString(styles[\"AvatarBadge\"], presetClassName)}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAEEC,SAAS,EACTC,gBAAgB,EAChBC,+BAA+B,QAC1B,2BAA2B;AAClC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,SAAS;AAa1D,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGA;EAAA,uBAFhCC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IACdC,SAAS;EAEZ,wBAAiBT,KAAK,CAACU,UAAU,CAACP,gBAAgB,CAAC;IAA3CQ,IAAI,qBAAJA,IAAI;EACZ,IAAMC,SAAS,GAAGR,+BAA+B,CAACO,IAAI,CAAC;EACvD,IAAME,cAAc,GAAGL,MAAM,KAAK,QAAQ;EAC1C,IAAMM,eAAe,GAAGD,cAAc,4EAEQ;EAC9C,IAAME,IAAI,GAAGF,cAAc,GAAGR,YAAY,GAAGC,kBAAkB;EAE/D,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVG,SAAS;IACb,UAAU,EAAC,QAAQ;IACnB,SAAS,EAAER,gBAAgB,oBAAwBa,eAAe;EAAE,iBAEpE,oBAAC,IAAI;IAAC,KAAK,EAAEF,SAAU;IAAC,MAAM,EAAEA;EAAU,EAAG,CAC7B;AAEtB,CAAC"}

package/dist/components/Avatar/AvatarBadge/icons.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["width", "height"],
+  _excluded2 = ["width", "height"];
+import * as React from "react";
+import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from "@vkontakte/icons";
+export var Icon12Circle = function Icon12Circle(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 12 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 12 : _ref$height,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Icon12CircleLib, _extends({}, restProps, {
+    width: width >= 24 ? 15 : 12,
+    height: height >= 24 ? 15 : 12
+  }));
+};
+export var Icon12OnlineMobile = function Icon12OnlineMobile(_ref2) {
+  var _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 8 : _ref2$width,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 12 : _ref2$height,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(Icon12OnlineMobileLib, _extends({}, restProps, {
+    width: width >= 24 ? 9 : 8,
+    height: height >= 24 ? 15 : 12
+  }));
+};
+//# sourceMappingURL=icons.js.map

package/dist/components/Avatar/AvatarBadge/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":["React","Icon12Circle","Icon12CircleLib","Icon12OnlineMobile","Icon12OnlineMobileLib","width","height","restProps"],"sources":["../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from \"@vkontakte/icons\";\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib\n      {...restProps}\n      width={width >= 24 ? 15 : 12}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,YAAY,IAAIC,eAAe,EAC/BC,kBAAkB,IAAIC,qBAAqB,QACtC,kBAAkB;AAEzB,OAAO,IAAMH,YAAY,GAAG,SAAfA,YAAY,OAI2B;EAAA,sBAHlDI,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,EAAE;IACRC,SAAS;EAEZ,oBACE,oBAAC,eAAe,eACVA,SAAS;IACb,KAAK,EAAEF,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAG;IAC7B,MAAM,EAAEC,MAAM,IAAI,EAAE,GAAG,EAAE,GAAG;EAAG,GAC/B;AAEN,CAAC;AAED,OAAO,IAAMH,kBAAkB,GAAG,SAArBA,kBAAkB,QAI2B;EAAA,wBAHxDE,KAAK;IAALA,KAAK,4BAAG,CAAC;IAAA,qBACTC,MAAM;IAANA,MAAM,6BAAG,EAAE;IACRC,SAAS;EAEZ,oBACE,oBAAC,qBAAqB,eAChBA,SAAS;IACb,KAAK,EAAEF,KAAK,IAAI,EAAE,GAAG,CAAC,GAAG,CAAE;IAC3B,MAAM,EAAEC,MAAM,IAAI,EAAE,GAAG,EAAE,GAAG;EAAG,GAC/B;AAEN,CAAC"}

package/dist/components/Avatar/helpers.js

@@ -1,10 +1,10 @@
 var MAX_FONT_SIZE = 30;
 var MAX_IMAGE_BASE_SIZE = 96;
 var RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;
+
 /**
  * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.
  */
-
 export function getInitialsFontSize(avatarSize) {
   if (avatarSize <= 16) {
     return 5;
@@ -27,7 +27,6 @@ export function getInitialsFontSize(avatarSize) {
   } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {
     return MAX_FONT_SIZE;
   }
-
   var calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);
   var evenFix = calculatedFontSize % 2;
   return calculatedFontSize + evenFix;

package/dist/components/Avatar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"sources":["../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from \"../ImageBase/ImageBase\";\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"mappings":"AAEA,IAAMA,aAAa,GAAG,EAAtB;AACA,IAAMC,mBAAkC,GAAG,EAA3C;AACA,IAAMC,aAAa,GAAGF,aAAa,GAAGC,mBAAtC;AAEA;AACA;AACA;;AACA,OAAO,SAASE,mBAAT,CAA6BC,UAA7B,EAAyD;EAC9D,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IACpB,OAAO,CAAP;EACD,CAFD,MAEO,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,CAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,GAAG,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAI,EAAlB,EAAsB;IAC3B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,UAAU,IAAIH,mBAAlB,EAAuC;IAC5C,OAAOD,aAAP;EACD;;EAED,IAAMK,kBAAkB,GAAGC,IAAI,CAACC,IAAL,CAAUH,UAAU,GAAGF,aAAvB,CAA3B;EACA,IAAMM,OAAO,GAAGH,kBAAkB,GAAG,CAArC;EACA,OAAOA,kBAAkB,GAAGG,OAA5B;AACD"}
+{"version":3,"file":"helpers.js","names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"sources":["../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from \"../ImageBase/ImageBase\";\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"mappings":"AAEA,IAAMA,aAAa,GAAG,EAAE;AACxB,IAAMC,mBAAkC,GAAG,EAAE;AAC7C,IAAMC,aAAa,GAAGF,aAAa,GAAGC,mBAAmB;;AAEzD;AACA;AACA;AACA,OAAO,SAASE,mBAAmB,CAACC,UAAkB,EAAU;EAC9D,IAAIA,UAAU,IAAI,EAAE,EAAE;IACpB,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,GAAG,EAAE,EAAE;IAC1B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAIH,mBAAmB,EAAE;IAC5C,OAAOD,aAAa;EACtB;EAEA,IAAMK,kBAAkB,GAAGC,IAAI,CAACC,IAAI,CAACH,UAAU,GAAGF,aAAa,CAAC;EAChE,IAAMM,OAAO,GAAGH,kBAAkB,GAAG,CAAC;EACtC,OAAOA,kBAAkB,GAAGG,OAAO;AACrC"}

package/dist/components/Badge/Badge.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import "./Badge.css";
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
     mode: "new" | "prominent";
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export declare const Badge: ({ mode, ...restProps }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => JSX.Element;

package/dist/components/Badge/Badge.js

@@ -1,19 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mode"];
-import { createScopedElement } from "../../lib/jsxRuntime";
-import { classNames } from "../../lib/classNames";
-
+var _excluded = ["mode", "className"];
+import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
 export var Badge = function Badge(_ref) {
   var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "new" : _ref$mode,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  return createScopedElement("span", _extends({
-    vkuiClass: classNames("Badge", "Badge--mode-".concat(mode))
+    mode = _ref$mode === void 0 ? "new" : _ref$mode,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: classNamesString("vkuiBadge", styles["Badge--mode-".concat(mode)], className)
   }, restProps));
 };
+var styles = {
+  "Badge--mode-new": "vkuiBadge--mode-new",
+  "Badge--mode-prominent": "vkuiBadge--mode-prominent"
+};
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["classNames","Badge","mode","restProps"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./Badge.css\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: \"new\" | \"prominent\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = \"new\", ...restProps }: BadgeProps) => (\n  <span vkuiClass={classNames(\"Badge\", `Badge--mode-${mode}`)} {...restProps} />\n);\n"],"mappings":";;;;AACA,SAASA,UAAT;;AAOA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;EAAA,qBAAGC,IAAH;EAAA,IAAGA,IAAH,0BAAU,KAAV;EAAA,IAAoBC,SAApB;;EAAA,OACnB;IAAM,SAAS,EAAEH,UAAU,CAAC,OAAD,wBAAyBE,IAAzB;EAA3B,GAAiEC,SAAjE,EADmB;AAAA,CAAd"}
+{"version":3,"file":"Badge.js","names":["React","classNamesString","Badge","mode","className","restProps","styles"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Badge.module.css\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: \"new\" | \"prominent\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({\n  mode = \"new\",\n  className,\n  ...restProps\n}: BadgeProps) => (\n  <span\n    className={classNamesString(\n      styles[\"Badge\"],\n      styles[`Badge--mode-${mode}`],\n      className\n    )}\n    {...restProps}\n  />\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAOvD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,qBAChBC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAEJ,gBAAgB,cAEzBK,MAAM,uBAAgBH,IAAI,EAAG,EAC7BC,SAAS;EACT,GACEC,SAAS,EACb;AAAA,CACH;AAAC;EAAA;EAAA;AAAA"}

package/dist/components/Banner/Banner.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import "./Banner.css";
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Тип баннера.
@@ -72,4 +71,4 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, ...restProps }: BannerProps) => JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, ...restProps }: BannerProps) => JSX.Element;