@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import { HasRef } from "../../types";
 import "./HorizontalScroll.css";
 export declare type ScrollPositionHandler = (currentPosition: number) => number;
-export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps, HasRef<HTMLDivElement> {
+export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Функция для расчета величины прокрутки при клике на левую стрелку.
      */
@@ -19,4 +18,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: React.FC<Pick<HorizontalScrollProps, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRef" | "scrollAnimationDuration" | "getScrollToLeft" | "getScrollToRight" | "showArrows" | "arrowSize"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, scrollAnimationDuration, getRef, ...restProps }: HorizontalScrollProps) => JSX.Element;

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "hasMouse", "getRef"];
+var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { HorizontalScrollArrow } from "./HorizontalScrollArrow";
 import { easeInOutSine } from "../../lib/fx";
 import { useEventListener } from "../../hooks/useEventListener";
@@ -92,8 +92,12 @@ function doScroll(_ref) {
     }
   })();
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
+ */
 
-var HorizontalScrollComponent = function HorizontalScrollComponent(_ref2) {
+
+export var HorizontalScroll = function HorizontalScroll(_ref2) {
   var children = _ref2.children,
       getScrollToLeft = _ref2.getScrollToLeft,
       getScrollToRight = _ref2.getScrollToRight,
@@ -103,7 +107,6 @@ var HorizontalScrollComponent = function HorizontalScrollComponent(_ref2) {
       arrowSize = _ref2$arrowSize === void 0 ? "l" : _ref2$arrowSize,
       _ref2$scrollAnimation = _ref2.scrollAnimationDuration,
       scrollAnimationDuration = _ref2$scrollAnimation === void 0 ? SCROLL_ONE_FRAME_TIME : _ref2$scrollAnimation,
-      hasMouse = _ref2.hasMouse,
       getRef = _ref2.getRef,
       restProps = _objectWithoutProperties(_ref2, _excluded);
 
@@ -120,6 +123,10 @@ var HorizontalScrollComponent = function HorizontalScrollComponent(_ref2) {
   var isCustomScrollingRef = React.useRef(false);
   var scrollerRef = useExternRef(getRef);
   var animationQueue = React.useRef([]);
+
+  var _useAdaptivity = useAdaptivity(),
+      hasMouse = _useAdaptivity.hasMouse;
+
   var scrollTo = React.useCallback(function (getScrollPosition) {
     var scrollElement = scrollerRef.current;
     animationQueue.current.push(function () {
@@ -175,12 +182,12 @@ var HorizontalScrollComponent = function HorizontalScrollComponent(_ref2) {
   React.useEffect(onscroll, [scrollerRef, children, onscroll]);
   return createScopedElement("div", _extends({}, restProps, {
     vkuiClass: classNames("HorizontalScroll", showArrows === "always" && "HorizontalScroll--withConstArrows")
-  }), showArrows && hasMouse && canScrollLeft && createScopedElement(HorizontalScrollArrow, {
+  }), showArrows && (hasMouse || hasMouse === undefined) && canScrollLeft && createScopedElement(HorizontalScrollArrow, {
     size: arrowSize,
     direction: "left",
     vkuiClass: "HorizontalScroll__arrowLeft",
     onClick: scrollToLeft
-  }), showArrows && hasMouse && canScrollRight && createScopedElement(HorizontalScrollArrow, {
+  }), showArrows && (hasMouse || hasMouse === undefined) && canScrollRight && createScopedElement(HorizontalScrollArrow, {
     size: arrowSize,
     direction: "right",
     vkuiClass: "HorizontalScroll__arrowRight",
@@ -192,13 +199,4 @@ var HorizontalScrollComponent = function HorizontalScrollComponent(_ref2) {
     vkuiClass: "HorizontalScroll__in-wrapper"
   }, children)));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
- */
-
-
-export var HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
-  hasMouse: true
-});
-HorizontalScroll.displayName = "HorizontalScroll";
 //# sourceMappingURL=HorizontalScroll.js.map

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["React","withAdaptivity","HorizontalScrollArrow","easeInOutSine","useEventListener","useExternRef","classNames","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScrollComponent","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","hasMouse","getRef","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","HorizontalScroll","displayName"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.css\";\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: \"m\" | \"l\";\n  showArrows?: boolean | \"always\";\n  scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (\n      roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n      elapsed !== 1\n    ) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\nconst HorizontalScrollComponent = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = \"l\",\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  hasMouse,\n  getRef,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth:\n            scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        })\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef]\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (\n      showArrows &&\n      hasMouse &&\n      scrollerRef.current &&\n      !isCustomScrollingRef.current\n    ) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth\n      );\n    }\n  }, [hasMouse, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener(\"scroll\", onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"HorizontalScroll\",\n        showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n      )}\n    >\n      {showArrows && hasMouse && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          vkuiClass=\"HorizontalScroll__arrowLeft\"\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && hasMouse && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          vkuiClass=\"HorizontalScroll__arrowRight\"\n          onClick={scrollToRight}\n        />\n      )}\n      <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n        <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {\n  hasMouse: true,\n});\n\nHorizontalScroll.displayName = \"HorizontalScroll\";\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalScroll.js","names":["React","useAdaptivity","HorizontalScrollArrow","easeInOutSine","useEventListener","useExternRef","classNames","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasMouse","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.css\";\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: \"m\" | \"l\";\n  showArrows?: boolean | \"always\";\n  scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (\n      roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n      elapsed !== 1\n    ) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = \"l\",\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const { hasMouse } = useAdaptivity();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth:\n            scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        })\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef]\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (\n      showArrows &&\n      hasMouse &&\n      scrollerRef.current &&\n      !isCustomScrollingRef.current\n    ) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth\n      );\n    }\n  }, [hasMouse, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener(\"scroll\", onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"HorizontalScroll\",\n        showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n      )}\n    >\n      {showArrows && (hasMouse || hasMouse === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          vkuiClass=\"HorizontalScroll__arrowLeft\"\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasMouse || hasMouse === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          vkuiClass=\"HorizontalScroll__arrowRight\"\n          onClick={scrollToRight}\n        />\n      )}\n      <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n        <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -1,3 +1 @@
-.vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--android-easing);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;z-index:3}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:#fff;background-color:var(
-    --modal_card_background,var(--vkui--color_background_modal)
-  );box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));display:flex;justify-content:center}.vkuiHorizontalScrollArrow--m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiHorizontalScrollArrow--ios .vkuiHorizontalScrollArrow{transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:var(--ios-easing)}.vkuiGallery:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}
+.vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--android-easing);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;z-index:3}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:var(--vkui--color_background_modal);box-shadow:var(--vkui--elevation3);color:var(--vkui--color_icon_secondary);display:flex;justify-content:center}.vkuiHorizontalScrollArrow--size-m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--size-l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--direction-left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--direction-right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiHorizontalScrollArrow--ios .vkuiHorizontalScrollArrow{transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:var(--ios-easing)}.vkuiGallery:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js

@@ -5,7 +5,7 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import { Icon24Chevron, Icon24ChevronCompactLeft, Icon16Chevron, Icon16ChevronLeft } from "@vkontakte/icons";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { Tappable } from "../Tappable/Tappable";
 import "./HorizontalScrollArrow.css";
 export var HorizontalScrollArrow = function HorizontalScrollArrow(_ref) {
@@ -28,7 +28,7 @@ export var HorizontalScrollArrow = function HorizontalScrollArrow(_ref) {
     Component: "button",
     hasHover: false,
     hasActive: false,
-    vkuiClass: classNames("HorizontalScrollArrow", "HorizontalScrollArrow--".concat(size), "HorizontalScrollArrow--".concat(direction), platform === IOS && "HorizontalScrollArrow--ios"),
+    vkuiClass: classNames("HorizontalScrollArrow", "HorizontalScrollArrow--size-".concat(size), "HorizontalScrollArrow--direction-".concat(direction), platform === Platform.IOS && "HorizontalScrollArrow--ios"),
     onClick: onClick
   }), createScopedElement("span", {
     vkuiClass: "HorizontalScrollArrow__icon"

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollArrow.js","names":["Icon24Chevron","Icon24ChevronCompactLeft","Icon16Chevron","Icon16ChevronLeft","classNames","usePlatform","IOS","Tappable","HorizontalScrollArrow","size","direction","onClick","restProps","platform","ArrowIcon"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS } from \"../../lib/platform\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport \"./HorizontalScrollArrow.css\";\n\nexport interface HorizontalScrollArrowProps {\n  direction: \"left\" | \"right\";\n  size?: \"m\" | \"l\";\n  onClick(): void;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = \"l\",\n  direction,\n  onClick,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  const platform = usePlatform();\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === \"m\") {\n    ArrowIcon = direction === \"left\" ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === \"left\" ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      vkuiClass={classNames(\n        \"HorizontalScrollArrow\",\n        `HorizontalScrollArrow--${size}`,\n        `HorizontalScrollArrow--${direction}`,\n        platform === IOS && \"HorizontalScrollArrow--ios\"\n      )}\n      onClick={onClick}\n    >\n      <span vkuiClass=\"HorizontalScrollArrow__icon\">\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AACA,SACEA,aADF,EAEEC,wBAFF,EAGEC,aAHF,EAIEC,iBAJF,QAKO,kBALP;AAMA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,GAAT;AACA,SAASC,QAAT;AACA;AAQA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OAKH;EAAA,qBAJhCC,IAIgC;EAAA,IAJhCA,IAIgC,0BAJzB,GAIyB;EAAA,IAHhCC,SAGgC,QAHhCA,SAGgC;EAAA,IAFhCC,OAEgC,QAFhCA,OAEgC;EAAA,IAD7BC,SAC6B;;EAChC,IAAMC,QAAQ,GAAGR,WAAW,EAA5B;EACA,IAAIS,SAAJ;;EAEA,IAAIL,IAAI,KAAK,GAAb,EAAkB;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBP,iBAAvB,GAA2CD,aAAvD;EACD,CAFD,MAEO;IACLY,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBT,wBAAvB,GAAkDD,aAA9D;EACD;;EAED,OACE,oBAAC,QAAD,eACMY,SADN;IAEE,SAAS,EAAC,QAFZ;IAGE,QAAQ,EAAE,KAHZ;IAIE,SAAS,EAAE,KAJb;IAKE,SAAS,EAAER,UAAU,CACnB,uBADmB,mCAEOK,IAFP,oCAGOC,SAHP,GAInBG,QAAQ,KAAKP,GAAb,IAAoB,4BAJD,CALvB;IAWE,OAAO,EAAEK;EAXX,IAaE;IAAM,SAAS,EAAC;EAAhB,GACE,oBAAC,SAAD,OADF,CAbF,CADF;AAmBD,CAlCM"}
+{"version":3,"file":"HorizontalScrollArrow.js","names":["Icon24Chevron","Icon24ChevronCompactLeft","Icon16Chevron","Icon16ChevronLeft","classNames","usePlatform","Platform","Tappable","HorizontalScrollArrow","size","direction","onClick","restProps","platform","ArrowIcon","IOS"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n  Icon16Chevron,\n  Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport \"./HorizontalScrollArrow.css\";\n\nexport interface HorizontalScrollArrowProps {\n  direction: \"left\" | \"right\";\n  size?: \"m\" | \"l\";\n  onClick(): void;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = \"l\",\n  direction,\n  onClick,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  const platform = usePlatform();\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === \"m\") {\n    ArrowIcon = direction === \"left\" ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === \"left\" ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      vkuiClass={classNames(\n        \"HorizontalScrollArrow\",\n        `HorizontalScrollArrow--size-${size}`,\n        `HorizontalScrollArrow--direction-${direction}`,\n        platform === Platform.IOS && \"HorizontalScrollArrow--ios\"\n      )}\n      onClick={onClick}\n    >\n      <span vkuiClass=\"HorizontalScrollArrow__icon\">\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AACA,SACEA,aADF,EAEEC,wBAFF,EAGEC,aAHF,EAIEC,iBAJF,QAKO,kBALP;AAMA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA;AAQA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OAKH;EAAA,qBAJhCC,IAIgC;EAAA,IAJhCA,IAIgC,0BAJzB,GAIyB;EAAA,IAHhCC,SAGgC,QAHhCA,SAGgC;EAAA,IAFhCC,OAEgC,QAFhCA,OAEgC;EAAA,IAD7BC,SAC6B;;EAChC,IAAMC,QAAQ,GAAGR,WAAW,EAA5B;EACA,IAAIS,SAAJ;;EAEA,IAAIL,IAAI,KAAK,GAAb,EAAkB;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBP,iBAAvB,GAA2CD,aAAvD;EACD,CAFD,MAEO;IACLY,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBT,wBAAvB,GAAkDD,aAA9D;EACD;;EAED,OACE,oBAAC,QAAD,eACMY,SADN;IAEE,SAAS,EAAC,QAFZ;IAGE,QAAQ,EAAE,KAHZ;IAIE,SAAS,EAAE,KAJb;IAKE,SAAS,EAAER,UAAU,CACnB,uBADmB,wCAEYK,IAFZ,8CAGiBC,SAHjB,GAInBG,QAAQ,KAAKP,QAAQ,CAACS,GAAtB,IAA6B,4BAJV,CALvB;IAWE,OAAO,EAAEJ;EAXX,IAaE;IAAM,SAAS,EAAC;EAAhB,GACE,oBAAC,SAAD,OADF,CAbF,CADF;AAmBD,CAlCM"}

package/dist/cssm/components/IconButton/IconButton.css

@@ -1 +1 @@
-.vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}.vkuiFormField__after .vkuiIconButton,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);display:flex;height:44px;height:var(--vkui--size_field_height--regular,44px);justify-content:center;width:44px;width:var(--vkui--size_field_height--regular,44px)}.vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiFormField__after .vkuiIconButton--sizeY-compact{width:36px;width:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__after .vkuiIconButton--sizeY-compact,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact,36px)}
+.vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiIconButton--ios{border-radius:var(--vkui--size_border_radius--regular)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiIconButton--sizeY-none{height:44px}.vkuiIconButton--sizeY-none .vkuiIcon--16,.vkuiIconButton--sizeY-none .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton--sizeY-none .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-none .vkuiIcon--28{padding:8px}}.vkuiFormField__after .vkuiIconButton,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:var(--vkui--size_field_height--regular);justify-content:center;width:var(--vkui--size_field_height--regular)}.vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiFormField__after .vkuiIconButton--sizeY-compact{height:var(--vkui--size_field_height--compact);width:var(--vkui--size_field_height--compact)}.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact{height:var(--vkui--size_field_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormField__after .vkuiIconButton--sizeY-none{height:var(--vkui--size_field_height--compact);width:var(--vkui--size_field_height--compact)}.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-none,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-none{height:var(--vkui--size_field_height--compact)}}

package/dist/cssm/components/IconButton/IconButton.d.ts

@@ -3,12 +3,8 @@ import { TappableProps } from "../Tappable/Tappable";
 import "./IconButton.css";
 export interface IconButtonProps extends TappableProps {
     children?: React.ReactNode;
-    /**
-     * @deprecated будет удалено в 5.0.0. Используйте `children`
-     */
-    icon?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: React.FC<Pick<IconButtonProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "icon" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const IconButton: ({ children, Component, ...restProps }: IconButtonProps) => JSX.Element;

package/dist/cssm/components/IconButton/IconButton.js

@@ -1,45 +1,35 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["icon", "sizeY", "children", "Component"];
+var _excluded = ["children", "Component"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
-import { IOS } from "../../lib/platform";
-import { warnOnce } from "../../lib/warnOnce";
+import { Platform } from "../../lib/platform";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./IconButton.css";
-var warn = warnOnce("IconButton");
 
-var IconButtonComponent = function IconButtonComponent(_ref) {
-  var icon = _ref.icon,
-      sizeY = _ref.sizeY,
-      children = _ref.children,
+/**
+ * @see https://vkcom.github.io/VKUI/#/IconButton
+ */
+export var IconButton = function IconButton(_ref) {
+  var children = _ref.children,
       _ref$Component = _ref.Component,
       Component = _ref$Component === void 0 ? "button" : _ref$Component,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
 
-  if (icon && process.env.NODE_ENV === "development") {
-    warn("Свойство icon устарело и будет удалено в 5.0.0. Используйте children");
-  }
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
 
   return createScopedElement(Tappable, _extends({
     activeEffectDelay: 200,
     activeMode: "background"
   }, restProps, {
     Component: restProps.href ? "a" : Component,
-    vkuiClass: classNames("IconButton", "IconButton--sizeY-".concat(sizeY), platform === IOS && "IconButton--ios")
-  }), icon || children);
+    vkuiClass: classNames("IconButton", getSizeYClassName("IconButton", sizeY), platform === Platform.IOS && "IconButton--ios")
+  }), children);
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/IconButton
- */
-
-
-export var IconButton = withAdaptivity(IconButtonComponent, {
-  sizeY: true
-});
-IconButton.displayName = "IconButton";
 //# sourceMappingURL=IconButton.js.map

package/dist/cssm/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["Tappable","classNames","usePlatform","withAdaptivity","IOS","warnOnce","warn","IconButtonComponent","icon","sizeY","children","Component","restProps","platform","process","env","NODE_ENV","href","IconButton","displayName"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./IconButton.css\";\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `children`\n   */\n  icon?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"IconButton\");\n\nconst IconButtonComponent = ({\n  icon,\n  sizeY,\n  children,\n  Component = \"button\",\n  ...restProps\n}: IconButtonProps) => {\n  const platform = usePlatform();\n\n  if (icon && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство icon устарело и будет удалено в 5.0.0. Используйте children\"\n    );\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      {...restProps}\n      Component={restProps.href ? \"a\" : Component}\n      vkuiClass={classNames(\n        \"IconButton\",\n        `IconButton--sizeY-${sizeY}`,\n        platform === IOS && \"IconButton--ios\"\n      )}\n    >\n      {icon || children}\n    </Tappable>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = withAdaptivity(IconButtonComponent, {\n  sizeY: true,\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;;AACA,SAAwBA,QAAxB;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,cAAT;AACA,SAASC,GAAT;AACA,SAASC,QAAT;AACA;AAUA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,YAAD,CAArB;;AAEA,IAAME,mBAAmB,GAAG,SAAtBA,mBAAsB,OAML;EAAA,IALrBC,IAKqB,QALrBA,IAKqB;EAAA,IAJrBC,KAIqB,QAJrBA,KAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,0BAFrBC,SAEqB;EAAA,IAFrBA,SAEqB,+BAFT,QAES;EAAA,IADlBC,SACkB;;EACrB,IAAMC,QAAQ,GAAGX,WAAW,EAA5B;;EAEA,IAAIM,IAAI,IAAIM,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAArC,EAAoD;IAClDV,IAAI,CACF,sEADE,CAAJ;EAGD;;EAED,OACE,oBAAC,QAAD;IACE,iBAAiB,EAAE,GADrB;IAEE,UAAU,EAAC;EAFb,GAGMM,SAHN;IAIE,SAAS,EAAEA,SAAS,CAACK,IAAV,GAAiB,GAAjB,GAAuBN,SAJpC;IAKE,SAAS,EAAEV,UAAU,CACnB,YADmB,8BAEEQ,KAFF,GAGnBI,QAAQ,KAAKT,GAAb,IAAoB,iBAHD;EALvB,IAWGI,IAAI,IAAIE,QAXX,CADF;AAeD,CA9BD;AAgCA;AACA;AACA;;;AACA,OAAO,IAAMQ,UAAU,GAAGf,cAAc,CAACI,mBAAD,EAAsB;EAC5DE,KAAK,EAAE;AADqD,CAAtB,CAAjC;AAIPS,UAAU,CAACC,WAAX,GAAyB,YAAzB"}
+{"version":3,"file":"IconButton.js","names":["Tappable","classNames","usePlatform","Platform","getSizeYClassName","useAdaptivity","IconButton","children","Component","restProps","platform","sizeY","href","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./IconButton.css\";\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n  children,\n  Component = \"button\",\n  ...restProps\n}: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      {...restProps}\n      Component={restProps.href ? \"a\" : Component}\n      vkuiClass={classNames(\n        \"IconButton\",\n        getSizeYClassName(\"IconButton\", sizeY),\n        platform === Platform.IOS && \"IconButton--ios\"\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AACA,SAAwBA,QAAxB;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AACA,SAASC,iBAAT;AACA,SAASC,aAAT;AACA;;AAMA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAIH;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,0BAFrBC,SAEqB;EAAA,IAFrBA,SAEqB,+BAFT,QAES;EAAA,IADlBC,SACkB;;EACrB,IAAMC,QAAQ,GAAGR,WAAW,EAA5B;;EACA,qBAAkBG,aAAa,EAA/B;EAAA,IAAQM,KAAR,kBAAQA,KAAR;;EAEA,OACE,oBAAC,QAAD;IACE,iBAAiB,EAAE,GADrB;IAEE,UAAU,EAAC;EAFb,GAGMF,SAHN;IAIE,SAAS,EAAEA,SAAS,CAACG,IAAV,GAAiB,GAAjB,GAAuBJ,SAJpC;IAKE,SAAS,EAAEP,UAAU,CACnB,YADmB,EAEnBG,iBAAiB,CAAC,YAAD,EAAeO,KAAf,CAFE,EAGnBD,QAAQ,KAAKP,QAAQ,CAACU,GAAtB,IAA6B,iBAHV;EALvB,IAWGN,QAXH,CADF;AAeD,CAvBM"}

package/dist/cssm/components/Image/Image.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type ImageBaseProps, type ImageBaseBadgeProps } from "../ImageBase/ImageBase";
+export declare const IMAGE_DEFAULT_SIZE = 48;
+export interface ImageProps extends Omit<ImageBaseProps, "badge"> {
+    /**
+     * > Не показывается при `size < 24`
+     *
+     * Бейдж в правом нижнем углу компонента.
+     *
+     * Можно конструктор иконки или конфигурацию.
+     */
+    badge?: ImageBaseBadgeProps["Icon"] | ImageBaseBadgeProps;
+    /**
+     * Размер закругления.
+     */
+    borderRadius?: "s" | "l" | "m";
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Image
+ */
+export declare const Image: ({ size, badge: badgeProp, borderRadius: borderRadiusProp, style, className, ...restProps }: ImageProps) => JSX.Element;

package/dist/cssm/components/Image/Image.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "badge", "borderRadius", "style", "className"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import { classNamesString } from "../../lib/classNames";
+import { ImageBase } from "../ImageBase/ImageBase";
+
+require("./Image.module.css");
+
+var styles = {
+  "Image": "vkuiImage",
+  "Image__badge": "vkuiImage__badge",
+  "Image__badge--shifted": "vkuiImage__badge--shifted"
+};
+export var IMAGE_DEFAULT_SIZE = 48;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Image
+ */
+export var Image = function Image(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? IMAGE_DEFAULT_SIZE : _ref$size,
+      badgeProp = _ref.badge,
+      _ref$borderRadius = _ref.borderRadius,
+      borderRadiusProp = _ref$borderRadius === void 0 ? "m" : _ref$borderRadius,
+      style = _ref.style,
+      className = _ref.className,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var badge = badgeProp ? _objectSpread(_objectSpread({}, typeof badgeProp === "function" ? {
+    Icon: badgeProp
+  } : badgeProp), {}, {
+    className: classNamesString(styles["Image__badge"], size < 96 && styles["Image__badge--shifted"])
+  }) : undefined;
+  var borderRadius;
+
+  switch (borderRadiusProp) {
+    case "s":
+      {
+        if (size <= 32) {
+          borderRadius = 2;
+        } else if (size <= 56) {
+          borderRadius = 3;
+        }
+
+        borderRadius = 4;
+        break;
+      }
+
+    case "m":
+      {
+        if (size <= 32) {
+          borderRadius = 3;
+        } else if (size <= 48) {
+          borderRadius = 4;
+        } else if (size <= 72) {
+          borderRadius = 6;
+        } else if (size <= 80) {
+          borderRadius = 8;
+        }
+
+        borderRadius = 10;
+        break;
+      }
+
+    case "l":
+      {
+        if (size <= 16) {
+          borderRadius = 4;
+        } else if (size <= 20) {
+          borderRadius = 5;
+        } else if (size <= 32) {
+          borderRadius = 6;
+        } else if (size <= 40) {
+          borderRadius = 8;
+        } else if (size <= 48) {
+          borderRadius = 10;
+        } else if (size <= 56) {
+          borderRadius = 12;
+        } else if (size <= 64) {
+          borderRadius = 14;
+        }
+
+        borderRadius = 16;
+      }
+  }
+
+  return createScopedElement(ImageBase, _extends({}, restProps, {
+    size: size,
+    badge: badge,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      borderRadius: borderRadius
+    }),
+    className: classNamesString(styles["Image"], className)
+  }));
+};
+//# sourceMappingURL=Image.js.map

package/dist/cssm/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","names":["classNamesString","ImageBase","IMAGE_DEFAULT_SIZE","Image","size","badgeProp","badge","borderRadius","borderRadiusProp","style","className","restProps","Icon","styles","undefined"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import { classNamesString } from \"../../lib/classNames\";\nimport {\n  type ImageBaseProps,\n  type ImageBaseBadgeProps,\n  ImageBase,\n} from \"../ImageBase/ImageBase\";\nimport styles from \"./Image.module.css\";\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, \"badge\"> {\n  /**\n   * > Не показывается при `size < 24`\n   *\n   * Бейдж в правом нижнем углу компонента.\n   *\n   * Можно конструктор иконки или конфигурацию.\n   */\n  badge?: ImageBaseBadgeProps[\"Icon\"] | ImageBaseBadgeProps;\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: \"s\" | \"l\" | \"m\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  badge: badgeProp,\n  borderRadius: borderRadiusProp = \"m\",\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  const badge: ImageBaseProps[\"badge\"] | undefined = badgeProp\n    ? {\n        ...(typeof badgeProp === \"function\" ? { Icon: badgeProp } : badgeProp),\n        className: classNamesString(\n          styles[\"Image__badge\"],\n          size < 96 && styles[\"Image__badge--shifted\"]\n        ),\n      }\n    : undefined;\n\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case \"s\": {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case \"m\": {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case \"l\": {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      badge={badge}\n      style={{ ...style, borderRadius }}\n      className={classNamesString(styles[\"Image\"], className)}\n    />\n  );\n};\n"],"mappings":";;;;;AAAA,SAASA,gBAAT;AACA,SAGEC,SAHF;;;;;;;;;AAOA,OAAO,IAAMC,kBAAkB,GAAG,EAA3B;;AAiBP;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ,OAOH;EAAA,qBANhBC,IAMgB;EAAA,IANhBA,IAMgB,0BANTF,kBAMS;EAAA,IALTG,SAKS,QALhBC,KAKgB;EAAA,6BAJhBC,YAIgB;EAAA,IAJFC,gBAIE,kCAJiB,GAIjB;EAAA,IAHhBC,KAGgB,QAHhBA,KAGgB;EAAA,IAFhBC,SAEgB,QAFhBA,SAEgB;EAAA,IADbC,SACa;;EAChB,IAAML,KAA0C,GAAGD,SAAS,mCAElD,OAAOA,SAAP,KAAqB,UAArB,GAAkC;IAAEO,IAAI,EAAEP;EAAR,CAAlC,GAAwDA,SAFN;IAGtDK,SAAS,EAAEV,gBAAgB,CACzBa,MAAM,CAAC,cAAD,CADmB,EAEzBT,IAAI,GAAG,EAAP,IAAaS,MAAM,CAAC,uBAAD,CAFM;EAH2B,KAQxDC,SARJ;EAUA,IAAIP,YAAJ;;EAEA,QAAQC,gBAAR;IACE,KAAK,GAAL;MAAU;QACR,IAAIJ,IAAI,IAAI,EAAZ,EAAgB;UACdG,YAAY,GAAG,CAAf;QACD,CAFD,MAEO,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD;;QACDA,YAAY,GAAG,CAAf;QACA;MACD;;IACD,KAAK,GAAL;MAAU;QACR,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACdG,YAAY,GAAG,CAAf;QACD,CAFD,MAEO,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD;;QACDA,YAAY,GAAG,EAAf;QACA;MACD;;IACD,KAAK,GAAL;MAAU;QACR,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACdG,YAAY,GAAG,CAAf;QACD,CAFD,MAEO,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,CAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,EAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,EAAf;QACD,CAFM,MAEA,IAAIH,IAAI,IAAI,EAAZ,EAAgB;UACrBG,YAAY,GAAG,EAAf;QACD;;QACDA,YAAY,GAAG,EAAf;MACD;EAxCH;;EA2CA,OACE,oBAAC,SAAD,eACMI,SADN;IAEE,IAAI,EAAEP,IAFR;IAGE,KAAK,EAAEE,KAHT;IAIE,KAAK,kCAAOG,KAAP;MAAcF,YAAY,EAAZA;IAAd,EAJP;IAKE,SAAS,EAAEP,gBAAgB,CAACa,MAAM,CAAC,OAAD,CAAP,EAAkBH,SAAlB;EAL7B,GADF;AASD,CAxEM"}

package/dist/cssm/components/Image/Image.module.css

@@ -0,0 +1 @@
+.vkuiImage__badge{bottom:-4px;position:absolute;right:-4px;z-index:1}.vkuiImage__badge--shifted{bottom:-3px;right:-3px}

package/dist/cssm/components/ImageBase/ImageBase.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { HasRef, HasRootRef } from "../../types";
+import type { ImageBaseExpectedIconProps, ImageBaseSize } from "./types";
+import { type ImageBaseBadgeProps as ImageBaseBadgeInternalProps } from "./ImageBaseBadge/ImageBaseBadge";
+import { type ImageBaseOverlayProps as ImageBaseOverlayInternalProps } from "./ImageBaseOverlay/ImageBaseOverlay";
+export type { ImageBaseSize, ImageBaseExpectedIconProps };
+export declare type ImageBaseBadgeProps = Pick<ImageBaseBadgeInternalProps, "background" | "Icon">;
+export declare type ImageBaseOverlayProps = Pick<ImageBaseOverlayInternalProps, "theme" | "visibility" | "Icon">;
+export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
+    /**
+     * Задаёт размер картинки.
+     *
+     * > ⚠️ Избегайте передачи кастомного размера. Используйте размеры заданные дизайн-системой.
+     */
+    size?: ImageBaseSize | number;
+    /**
+     * > Не показывается при `size < 24`
+     *
+     * Бейдж в правом нижнем углу компонента.
+     *
+     * > Note: включаем `className`, чтобы можно было влиять на расположение и другие параметры бейджа.
+     */
+    badge?: ImageBaseBadgeProps & {
+        className?: string;
+    };
+    /**
+     * Интерактивный оверлей над картинкой.
+     *
+     * Если передать `true`, то будет применён оверлей с параметрами по умолчанию. Значение для `theme` будет браться из
+     * параметра `appearance` в `ConfigProvider`.
+     */
+    overlay?: boolean | ImageBaseOverlayProps;
+    /**
+     * Фолбек на случай, если картинка не прогрузилась. Принимает конструктор иконки.
+     *
+     * > Если передан `children`, то фолбек будет проигнорирован.
+     */
+    FallbackIcon?: React.ComponentType<ImageBaseExpectedIconProps> | null;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ImageBase
+ */
+export declare const ImageBase: ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, badge: badgeProp, overlay: overlayProp, FallbackIcon, children, "aria-label": ariaLabel, onClick, ...restProps }: ImageBaseProps) => JSX.Element;