@vkontakte/vkui 6.0.2 → 6.1.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport { useKeyboard } from './useKeyboard';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  StateProps,\n  useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n  });\n\n  const keyboardHandlers = useKeyboard();\n\n  const handlers = mergeCalls(focusEvents, stateEvents, keyboardHandlers, {\n    onPointerEnter,\n    onPointerLeave,\n    onPointerDown,\n    onPointerCancel,\n    onPointerUp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n  });\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles['Clickable__realClickable'],\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'label') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>) => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(baseClassNameProp, styles['Clickable__host']);\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","useFocusVisible","useFocusVisibleClassName","mergeCalls","RootComponent","useKeyboard","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockBubblingImmediate","stateEvents","keyboardHandlers","handlers","Provider","value","checkClickable","props","undefined","Component","disabled","component","Clickable","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport { useKeyboard } from './useKeyboard';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  StateProps,\n  useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n  });\n\n  const keyboardHandlers = useKeyboard();\n\n  const handlers = mergeCalls(focusEvents, stateEvents, keyboardHandlers, {\n    onPointerEnter,\n    onPointerLeave,\n    onPointerDown,\n    onPointerCancel,\n    onPointerUp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n  });\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles['Clickable__realClickable'],\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'label') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n  if (Component === 'a') {\n    return styles.Clickable__resetLinkStyle;\n  }\n  if (Component === 'button') {\n    return styles.Clickable__resetButtonStyle;\n  }\n  return;\n};\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>) => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(\n    baseClassNameProp,\n    getUserAgentResetClassName(commonProps.Component),\n    styles['Clickable__host'],\n  );\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["classNames","useFocusVisible","useFocusVisibleClassName","mergeCalls","RootComponent","useKeyboard","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockBubblingImmediate","stateEvents","keyboardHandlers","handlers","Provider","value","checkClickable","props","undefined","Component","disabled","component","getUserAgentResetClassName","Clickable__resetLinkStyle","Clickable__resetButtonStyle","Clickable","baseClassNameProp","commonProps","isClickable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -2,6 +2,27 @@
   cursor: pointer;
 }
 
+.Clickable__resetButtonStyle {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: none;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+}
+
+.Clickable__resetLinkStyle {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-tap-highlight-color: none;
+  text-decoration: none;
+}
+
 .Clickable__host:focus,
 .Clickable__host:focus-visible {
   outline: none;

package/dist/cssm/components/Clickable/useKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useKeyboard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\n\n/*\n * [a11y]\n * Обрабатывает событие onkeydown\n * для кастомных доступных элементов:\n * - role=\"link\" (активация по Enter)\n * - role=\"button\" (активация по Space и Enter)\n */\nexport function useKeyboard() {\n  function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {\n    if (!shouldTriggerClickOnEnterOrSpace(e)) {\n      return;\n    }\n\n    e.preventDefault();\n\n    // @ts-expect-error: TS2339 У элемента должен быть клик\n    e.target.click?.();\n  }\n\n  return { onKeyDown };\n}\n"],"names":["React","shouldTriggerClickOnEnterOrSpace","useKeyboard","onKeyDown","e","preventDefault","target","click"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,0BAA0B;AAE3E;;;;;;CAMC,GACD,OAAO,SAASC;IACd,SAASC,UAAUC,CAAsC;QACvD,IAAI,CAACH,iCAAiCG,IAAI;YACxC;QACF;QAEAA,EAAEC,cAAc;QAEhB,uDAAuD;QACvDD,EAAEE,MAAM,CAACC,KAAK;IAChB;IAEA,OAAO;QAAEJ;IAAU;AACrB"}
+{"version":3,"sources":["../../../../src/components/Clickable/useKeyboard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\n\n/*\n * [a11y]\n * Обрабатывает событие onkeydown\n * для кастомных доступных элементов:\n * - role=\"link\" (активация по Enter)\n * - role=\"button\" (активация по Space и Enter)\n */\nexport function useKeyboard() {\n  function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {\n    if (!shouldTriggerClickOnEnterOrSpace(e)) {\n      return;\n    }\n\n    e.preventDefault();\n\n    // @ts-expect-error: TS2339 У элемента должен быть клик\n    e.target.click?.();\n  }\n\n  return { onKeyDown };\n}\n"],"names":["React","shouldTriggerClickOnEnterOrSpace","useKeyboard","onKeyDown","e","preventDefault","target","click"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,0BAA0B;AAE3E;;;;;;CAMC,GACD,OAAO,SAASC;IACd,SAASC,UAAUC,CAAsC;QACvD,IAAI,CAACH,iCAAiCG,IAAI;YACxC;QACF;QAEAA,EAAEC,cAAc;QAEhB,uDAAuD;QACvDD,EAAEE,MAAM,CAACC,KAAK;IAChB;IAEA,OAAO;QAAEJ;IAAU;AACrB"}

package/dist/cssm/components/Clickable/useState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nexport const ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true }: StateProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    setHover(true);\n  };\n\n  const onPointerLeave = () => {\n    setHover(false);\n  };\n\n  return {\n    hover,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeClassName,\n  activeEffectDelay,\n  hasActive = true,\n}: StateProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active = hasActive && (activated || activatedState) ? activeClassName : undefined;\n\n  const onPointerDown = () => setActivated(true, ACTIVE_DELAY);\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  return {\n    active,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\nexport const ClickableLockStateContext = React.createContext<undefined | ((v: boolean) => void)>(\n  undefined,\n);\n\n/**\n * Блокирует стейт на всплытие\n */\nexport function useLockState() {\n  const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;\n  const [lockState, setLockState] = React.useState(false);\n\n  const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);\n\n  return [lockState, setLockBubbling, setLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({ hasHover, hasActive, ...restProps }: StateProps) {\n  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover: hasHover && !lockState,\n    hasActive: hasActive && !lockState,\n    ...restProps,\n  };\n\n  const { hover, ...hoverEvent } = useHover({ ...props });\n  const { active, ...activeEvent } = useActive(props);\n\n  const stateClassName = classNames(hover, active);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  React.useEffect(() => {\n    setLockBubbling(!!stateClassName);\n  }, [setLockBubbling, stateClassName]);\n\n  return {\n    stateClassName,\n    setLockBubblingImmediate,\n    ...handlers,\n  };\n}\n"],"names":["React","classNames","noop","callMultiple","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hoverClassName","hasHover","hoveredState","setHover","useState","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","ClickableLockStateContext","createContext","useLockState","setLockBubbling","useContext","lockState","setLockState","setLockBubblingImmediate","restProps","props","hoverEvent","activeEvent","stateClassName","handlers","useEffect"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nexport const ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true }: StateProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    setHover(true);\n  };\n\n  const onPointerLeave = () => {\n    setHover(false);\n  };\n\n  return {\n    hover,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeClassName,\n  activeEffectDelay,\n  hasActive = true,\n}: StateProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active = hasActive && (activated || activatedState) ? activeClassName : undefined;\n\n  const onPointerDown = () => setActivated(true, ACTIVE_DELAY);\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  return {\n    active,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\nexport const ClickableLockStateContext = React.createContext<undefined | ((v: boolean) => void)>(\n  undefined,\n);\n\n/**\n * Блокирует стейт на всплытие\n */\nexport function useLockState() {\n  const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;\n  const [lockState, setLockState] = React.useState(false);\n\n  const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);\n\n  return [lockState, setLockBubbling, setLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({ hasHover, hasActive, ...restProps }: StateProps) {\n  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover: hasHover && !lockState,\n    hasActive: hasActive && !lockState,\n    ...restProps,\n  };\n\n  const { hover, ...hoverEvent } = useHover({ ...props });\n  const { active, ...activeEvent } = useActive(props);\n\n  const stateClassName = classNames(hover, active);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  React.useEffect(() => {\n    setLockBubbling(!!stateClassName);\n  }, [setLockBubbling, stateClassName]);\n\n  return {\n    stateClassName,\n    setLockBubblingImmediate,\n    ...handlers,\n  };\n}\n"],"names":["React","classNames","noop","callMultiple","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hoverClassName","hasHover","hoveredState","setHover","useState","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","ClickableLockStateContext","createContext","useLockState","setLockBubbling","useContext","lockState","setLockState","setLockBubblingImmediate","restProps","props","hoverEvent","activeEvent","stateClassName","handlers","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cssm/components/Clickable/useStateWithDelay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype DispatchWithDelay<S> = (value: S, delay?: number) => void;\n\n/**\n * Возвращает значение с состоянием и функции на обновление состояния\n * без и с задержкой.\n *\n * # Пример\n *\n * ```ts\n * const [count, setCount] = useStateWithDelay(initialState);\n *\n * const click = () => {\n *   setCount(count + 1, 500)\n * }\n * ```\n */\nexport function useStateWithDelay<S>(\n  initialState: S | (() => S),\n  defaultDelay = 0,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n  const [value, setValue] = React.useState(initialState);\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n\n  const setValueWithDelay = React.useCallback(\n    (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n      clearTimeout(timeout.current);\n      if (delay === 0) {\n        setValue(newValue);\n        return;\n      }\n\n      timeout.current = setTimeout(() => setValue(newValue), delay);\n    },\n    [defaultDelay],\n  );\n\n  return [value, setValueWithDelay];\n}\n"],"names":["React","useStateWithDelay","initialState","defaultDelay","value","setValue","useState","timeout","useRef","setValueWithDelay","useCallback","newValue","delay","clearTimeout","current","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC;IAEhB,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAACJ;IACzC,MAAMK,UAAUP,MAAMQ,MAAM;IAE5B,MAAMC,oBAAoBT,MAAMU,WAAW,CACzC,CAACC,UAAmCC,QAAgBT,YAAY;QAC9DU,aAAaN,QAAQO,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfP,SAASM;YACT;QACF;QAEAJ,QAAQO,OAAO,GAAGC,WAAW,IAAMV,SAASM,WAAWC;IACzD,GACA;QAACT;KAAa;IAGhB,OAAO;QAACC;QAAOK;KAAkB;AACnC"}
+{"version":3,"sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype DispatchWithDelay<S> = (value: S, delay?: number) => void;\n\n/**\n * Возвращает значение с состоянием и функции на обновление состояния\n * без и с задержкой.\n *\n * # Пример\n *\n * ```ts\n * const [count, setCount] = useStateWithDelay(initialState);\n *\n * const click = () => {\n *   setCount(count + 1, 500)\n * }\n * ```\n */\nexport function useStateWithDelay<S>(\n  initialState: S | (() => S),\n  defaultDelay = 0,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n  const [value, setValue] = React.useState(initialState);\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n\n  const setValueWithDelay = React.useCallback(\n    (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n      clearTimeout(timeout.current);\n      if (delay === 0) {\n        setValue(newValue);\n        return;\n      }\n\n      timeout.current = setTimeout(() => setValue(newValue), delay);\n    },\n    [defaultDelay],\n  );\n\n  return [value, setValueWithDelay];\n}\n"],"names":["React","useStateWithDelay","initialState","defaultDelay","value","setValue","useState","timeout","useRef","setValueWithDelay","useCallback","newValue","delay","clearTimeout","current","setTimeout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC;IAEhB,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAACJ;IACzC,MAAMK,UAAUP,MAAMQ,MAAM;IAE5B,MAAMC,oBAAoBT,MAAMU,WAAW,CACzC,CAACC,UAAmCC,QAAgBT,YAAY;QAC9DU,aAAaN,QAAQO,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfP,SAASM;YACT;QACF;QAEAJ,QAAQO,OAAO,GAAGC,WAAW,IAAMV,SAASM,WAAWC;IACzD,GACA;QAACT;KAAa;IAGhB,OAAO;QAACC;QAAOK;KAAkB;AACnC"}

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

@@ -6,5 +6,5 @@ export interface ConfigProviderProps extends Partial<ConfigProviderContextInterf
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-export declare const ConfigProvider: (propsRaw: ConfigProviderProps) => React.JSX.Element;
+export declare const ConfigProvider: (propsRaw: ConfigProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConfigProvider.d.ts.map

package/dist/cssm/components/ConfigProvider/ConfigProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEL,KAAK,8BAA8B,EAEpC,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,aAAc,mBAAmB,sBAqC3D,CAAC"}
+{"version":3,"file":"ConfigProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAEL,KAAK,8BAA8B,EAEpC,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,aAAc,mBAAmB,4CAuC3D,CAAC"}

package/dist/cssm/components/ConfigProvider/ConfigProvider.js

@@ -1,4 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { IconAppearanceProvider } from '@vkontakte/icons';
 import { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { TokensClassProvider } from '../../lib/tokens';
@@ -24,9 +26,15 @@ import { ConfigProviderContext, useConfigProvider } from './ConfigProviderContex
         tokensClassNames,
         appearance
     });
-    return /*#__PURE__*/ React.createElement(ConfigProviderContext.Provider, {
-        value: configContext
-    }, /*#__PURE__*/ React.createElement(TokensClassProvider, null, children));
+    return /*#__PURE__*/ _jsx(ConfigProviderContext.Provider, {
+        value: configContext,
+        children: /*#__PURE__*/ _jsx(IconAppearanceProvider, {
+            value: appearance,
+            children: /*#__PURE__*/ _jsx(TokensClassProvider, {
+                children: children
+            })
+        })
+    });
 };
 
 //# sourceMappingURL=ConfigProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps) => {\n  const props = excludeKeysWithUndefined(propsRaw);\n  const parentConfig = useConfigProvider();\n\n  const {\n    children,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance: appearanceProp,\n    tokensClassNames,\n  } = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const appearance = useAutoDetectAppearance(appearanceProp);\n\n  const configContext = useObjectMemo({\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    tokensClassNames,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","useAutoDetectAppearance","useObjectMemo","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","ConfigProvider","propsRaw","props","parentConfig","children","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","tokensClassNames","configContext","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,wBAAwB,QAAQ,kBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQL,yBAAyBI;IACvC,MAAME,eAAeJ;IAErB,MAAM,EACJK,QAAQ,EACRC,yBAAyB,EACzBC,8BAA8B,EAC9BC,SAAS,EACTC,uBAAuB,EACvBC,QAAQ,EACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,gBAAgB,EACjB,GAAG;QACF,GAAGV,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMS,aAAajB,wBAAwBkB;IAE3C,MAAME,gBAAgBnB,cAAc;QAClCU;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;QACAF;IACF;IAEA,qBACE,oBAACb,sBAAsBiB,QAAQ;QAACC,OAAOF;qBACrC,oBAAClB,2BAAqBQ;AAG5B,EAAE"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps) => {\n  const props = excludeKeysWithUndefined(propsRaw);\n  const parentConfig = useConfigProvider();\n\n  const {\n    children,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance: appearanceProp,\n    tokensClassNames,\n  } = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const appearance = useAutoDetectAppearance(appearanceProp);\n\n  const configContext = useObjectMemo({\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    tokensClassNames,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <IconAppearanceProvider value={appearance}>\n        <TokensClassProvider>{children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectAppearance","useObjectMemo","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","ConfigProvider","propsRaw","props","parentConfig","children","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","tokensClassNames","configContext","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,wBAAwB,QAAQ,kBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQL,yBAAyBI;IACvC,MAAME,eAAeJ;IAErB,MAAM,EACJK,QAAQ,EACRC,yBAAyB,EACzBC,8BAA8B,EAC9BC,SAAS,EACTC,uBAAuB,EACvBC,QAAQ,EACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,gBAAgB,EACjB,GAAG;QACF,GAAGV,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMS,aAAajB,wBAAwBkB;IAE3C,MAAME,gBAAgBnB,cAAc;QAClCU;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;QACAF;IACF;IAEA,qBACE,KAACb,sBAAsBiB,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACrB;YAAuBuB,OAAOL;sBAC7B,cAAA,KAACf;0BAAqBQ;;;;AAI9B,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens';\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   */\n  isWebView: boolean;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * CSS классы, определяющие набор токенов.\n   *\n   * - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n   * - Используйте `{ [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n   *\n   * @default\n   * {\n   *   android: {\n   *     light: 'vkui--vkBase--light',\n   *     dark: 'vkui--vkBase--dark',\n   *   },\n   *   ios: {\n   *     light: 'vkui--vkIOS--light',\n   *     dark: 'vkui--vkIOS--dark',\n   *   },\n   *   vkcom: {\n   *     light: 'vkui--vkCom--light',\n   *     dark: 'vkui--vkCom--dark',\n   *   }\n   * }\n   */\n  tokensClassNames: TokensClassNames;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({\n  hasCustomPanelHeaderAfter: false,\n  customPanelHeaderAfterMinWidth: 90,\n  isWebView: false,\n  transitionMotionEnabled: true,\n  platform: platform(),\n  appearance: undefined, // undefined обозначает что тема должна определиться автоматически\n  tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n  locale: 'ru',\n});\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","appearance","undefined","tokensClassNames","locale","useConfigProvider","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,QAAQ,QAA2B,qBAAqB;AACjE,SAASC,0BAA0B,QAA+B,mBAAmB;AAuErF,OAAO,MAAMC,sCAAwBH,MAAMI,aAAa,CAAiC;IACvFC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,YAAYC;IACZC,kBAAkBT;IAClBU,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB,IAAMb,MAAMc,UAAU,CAACX,uBAAuB"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens';\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   */\n  isWebView: boolean;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * CSS классы, определяющие набор токенов.\n   *\n   * - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n   * - Используйте `{ [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n   *\n   * @default\n   * {\n   *   android: {\n   *     light: 'vkui--vkBase--light',\n   *     dark: 'vkui--vkBase--dark',\n   *   },\n   *   ios: {\n   *     light: 'vkui--vkIOS--light',\n   *     dark: 'vkui--vkIOS--dark',\n   *   },\n   *   vkcom: {\n   *     light: 'vkui--vkCom--light',\n   *     dark: 'vkui--vkCom--dark',\n   *   }\n   * }\n   */\n  tokensClassNames: TokensClassNames;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({\n  hasCustomPanelHeaderAfter: false,\n  customPanelHeaderAfterMinWidth: 90,\n  isWebView: false,\n  transitionMotionEnabled: true,\n  platform: platform(),\n  appearance: undefined, // undefined обозначает что тема должна определиться автоматически\n  tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n  locale: 'ru',\n});\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","appearance","undefined","tokensClassNames","locale","useConfigProvider","useContext"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,QAAQ,QAA2B,qBAAqB;AACjE,SAASC,0BAA0B,QAA+B,mBAAmB;AAuErF,OAAO,MAAMC,sCAAwBH,MAAMI,aAAa,CAAiC;IACvFC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,YAAYC;IACZC,kBAAkBT;IAClBU,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB,IAAMb,MAAMc,UAAU,CAACX,uBAAuB"}

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.d.ts

@@ -6,5 +6,5 @@ export interface ConfigProviderOverrideProps extends Partial<ConfigProviderConte
 /**
  * Компонент предназначен для перебивания одного из значений контекста
  */
-export declare function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps): React.JSX.Element;
+export declare function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConfigProviderOverride.d.ts.map

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigProviderOverride.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,8BAA8B,EAE/B,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,2BAA4B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,EAAE,2BAA2B,qBAahG"}
+{"version":3,"file":"ConfigProviderOverride.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,8BAA8B,EAE/B,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,2BAA4B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,EAAE,2BAA2B,2CAahG"}

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { ConfigProviderContext, useConfigProvider } from './ConfigProviderContext';
@@ -9,9 +10,10 @@ import { ConfigProviderContext, useConfigProvider } from './ConfigProviderContex
         ...parentConfig,
         ...contextValue
     });
-    return /*#__PURE__*/ React.createElement(ConfigProviderContext.Provider, {
-        value: configContext
-    }, children);
+    return /*#__PURE__*/ _jsx(ConfigProviderContext.Provider, {
+        value: configContext,
+        children: children
+    });
 }
 
 //# sourceMappingURL=ConfigProviderOverride.js.map

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * Компонент предназначен для перебивания одного из значений контекста\n */\nexport function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps) {\n  const parentConfig = useConfigProvider();\n\n  const configContext = useObjectMemo({\n    ...parentConfig,\n    ...contextValue,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      {children}\n    </ConfigProviderContext.Provider>\n  );\n}\n"],"names":["React","useObjectMemo","ConfigProviderContext","useConfigProvider","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EAAEC,QAAQ,EAAE,GAAGC,cAA2C;IAC/F,MAAMC,eAAeJ;IAErB,MAAMK,gBAAgBP,cAAc;QAClC,GAAGM,YAAY;QACf,GAAGD,YAAY;IACjB;IAEA,qBACE,oBAACJ,sBAAsBO,QAAQ;QAACC,OAAOF;OACpCH;AAGP"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * Компонент предназначен для перебивания одного из значений контекста\n */\nexport function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps) {\n  const parentConfig = useConfigProvider();\n\n  const configContext = useObjectMemo({\n    ...parentConfig,\n    ...contextValue,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      {children}\n    </ConfigProviderContext.Provider>\n  );\n}\n"],"names":["React","useObjectMemo","ConfigProviderContext","useConfigProvider","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EAAEC,QAAQ,EAAE,GAAGC,cAA2C;IAC/F,MAAMC,eAAeJ;IAErB,MAAMK,gBAAgBP,cAAc;QAClC,GAAGM,YAAY;QACf,GAAGD,YAAY;IACjB;IAEA,qBACE,KAACJ,sBAAsBO,QAAQ;QAACC,OAAOF;kBACpCH;;AAGP"}

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

@@ -0,0 +1,49 @@
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { TypographyProps } from '../Typography/Typography';
+import type { ContentBadgeModeType, ContentBadgeSizeType } from './types';
+export interface ContentBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<TypographyProps, 'weight'> {
+    /**
+     * Вид отображения.
+     */
+    mode?: ContentBadgeModeType;
+    /**
+     * Цвет оформления.
+     */
+    appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay';
+    /**
+     * Включает приближение значения закругления к форме круга.
+     *
+     * > Note: игнорируется при size="s"
+     */
+    capsule?: boolean;
+    /**
+     * Определяет отступы и размер текста.
+     *
+     * Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:
+     *
+     * - size="s" – ⚠️ не поддерживает иконки;
+     * - size="m" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;
+     * - size="l" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`;
+     */
+    size?: ContentBadgeSizeType;
+}
+/**
+ * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются
+ * поверх других элементов или рядом с ними.
+ *
+ * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.
+ *
+ * @since 6.1.0
+ * @see https://vkcom.github.io/VKUI/#/ContentBadge
+ *
+ * TODO [>=7]: переименовать в Badge
+ */
+export declare const ContentBadge: {
+    ({ appearance, mode, capsule, size, weight, className, children, ...restProps }: ContentBadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    SlotIcon: {
+        ({ className, getRootRef, children, ...restProps }: import("./ContentBadgeSlotIcon").ContentBadgeSlotIconProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=ContentBadge.d.ts.map

package/dist/cssm/components/ContentBadge/ContentBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAG3D,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqC1E,MAAM,WAAW,iBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY;qFAStB,iBAAiB;;;;;;CAwBnB,CAAC"}

package/dist/cssm/components/ContentBadge/ContentBadge.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Caption } from '../Typography/Caption/Caption';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { ContentBadgeContext } from './ContentBadgeContext';
+import { ContentBadgeSlotIcon } from './ContentBadgeSlotIcon';
+import styles from './ContentBadge.module.css';
+const appearanceClassNames = {
+    'accent': {
+        primary: styles['ContentBadge--primary-accent'],
+        secondary: styles['ContentBadge--secondary-accent'],
+        outline: styles['ContentBadge--outline-accent']
+    },
+    'neutral': {
+        primary: styles['ContentBadge--primary-neutral'],
+        secondary: styles['ContentBadge--secondary-neutral'],
+        outline: styles['ContentBadge--outline-neutral']
+    },
+    'accent-green': {
+        primary: styles['ContentBadge--primary-accent-green'],
+        secondary: styles['ContentBadge--secondary-accent-green'],
+        outline: styles['ContentBadge--outline-accent-green']
+    },
+    'accent-red': {
+        primary: styles['ContentBadge--primary-accent-red'],
+        secondary: styles['ContentBadge--secondary-accent-red'],
+        outline: styles['ContentBadge--outline-accent-red']
+    },
+    'overlay': {
+        primary: styles['ContentBadge--primary-overlay'],
+        secondary: styles['ContentBadge--secondary-overlay'],
+        outline: styles['ContentBadge--outline-overlay']
+    }
+};
+const sizeClassNames = {
+    s: styles['ContentBadge--size-s'],
+    m: styles['ContentBadge--size-m'],
+    l: styles['ContentBadge--size-l']
+};
+/**
+ * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются
+ * поверх других элементов или рядом с ними.
+ *
+ * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.
+ *
+ * @since 6.1.0
+ * @see https://vkcom.github.io/VKUI/#/ContentBadge
+ *
+ * TODO [>=7]: переименовать в Badge
+ */ export const ContentBadge = ({ appearance = 'accent', mode = 'primary', capsule, size = 'm', weight = '2', className, children, ...restProps })=>{
+    const TypographyComponent = size === 'l' ? Footnote : Caption;
+    return /*#__PURE__*/ _jsx(TypographyComponent, {
+        ...restProps,
+        weight: weight,
+        normalize: true,
+        className: classNames(className, styles.ContentBadge, size !== 's' && capsule && styles['ContentBadge--capsule'], mode === 'outline' && styles['ContentBadge--mode-outline'], appearanceClassNames[appearance][mode], sizeClassNames[size]),
+        children: /*#__PURE__*/ _jsx(ContentBadgeContext.Provider, {
+            value: {
+                isSingleChild: React.Children.count(children) === 1,
+                size
+            },
+            children: children
+        })
+    });
+};
+ContentBadge.displayName = 'ContentBadge';
+ContentBadge.SlotIcon = ContentBadgeSlotIcon;
+ContentBadge.SlotIcon.displayName = 'ContentBadge.SlotIcon';
+
+//# sourceMappingURL=ContentBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { TypographyProps } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeSlotIcon } from './ContentBadgeSlotIcon';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n  'accent': {\n    primary: styles['ContentBadge--primary-accent'],\n    secondary: styles['ContentBadge--secondary-accent'],\n    outline: styles['ContentBadge--outline-accent'],\n  },\n  'neutral': {\n    primary: styles['ContentBadge--primary-neutral'],\n    secondary: styles['ContentBadge--secondary-neutral'],\n    outline: styles['ContentBadge--outline-neutral'],\n  },\n  'accent-green': {\n    primary: styles['ContentBadge--primary-accent-green'],\n    secondary: styles['ContentBadge--secondary-accent-green'],\n    outline: styles['ContentBadge--outline-accent-green'],\n  },\n  'accent-red': {\n    primary: styles['ContentBadge--primary-accent-red'],\n    secondary: styles['ContentBadge--secondary-accent-red'],\n    outline: styles['ContentBadge--outline-accent-red'],\n  },\n  'overlay': {\n    primary: styles['ContentBadge--primary-overlay'],\n    secondary: styles['ContentBadge--secondary-overlay'],\n    outline: styles['ContentBadge--outline-overlay'],\n  },\n};\n\nconst sizeClassNames = {\n  s: styles['ContentBadge--size-s'],\n  m: styles['ContentBadge--size-m'],\n  l: styles['ContentBadge--size-l'],\n};\n\nexport interface ContentBadgeProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<TypographyProps, 'weight'> {\n  /**\n   * Вид отображения.\n   */\n  mode?: ContentBadgeModeType;\n  /**\n   * Цвет оформления.\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay';\n  /**\n   * Включает приближение значения закругления к форме круга.\n   *\n   * > Note: игнорируется при size=\"s\"\n   */\n  capsule?: boolean;\n  /**\n   * Определяет отступы и размер текста.\n   *\n   * Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:\n   *\n   * - size=\"s\" – ⚠️ не поддерживает иконки;\n   * - size=\"m\" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;\n   * - size=\"l\" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`;\n   */\n  size?: ContentBadgeSizeType;\n}\n\n/**\n * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются\n * поверх других элементов или рядом с ними.\n *\n * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.\n *\n * @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/ContentBadge\n *\n * TODO [>=7]: переименовать в Badge\n */\nexport const ContentBadge = ({\n  appearance = 'accent',\n  mode = 'primary',\n  capsule,\n  size = 'm',\n  weight = '2',\n  className,\n  children,\n  ...restProps\n}: ContentBadgeProps) => {\n  const TypographyComponent = size === 'l' ? Footnote : Caption;\n\n  return (\n    <TypographyComponent\n      {...restProps}\n      weight={weight}\n      normalize\n      className={classNames(\n        className,\n        styles.ContentBadge,\n        size !== 's' && capsule && styles['ContentBadge--capsule'],\n        mode === 'outline' && styles['ContentBadge--mode-outline'],\n        appearanceClassNames[appearance][mode],\n        sizeClassNames[size],\n      )}\n    >\n      <ContentBadgeContext.Provider\n        value={{ isSingleChild: React.Children.count(children) === 1, size }}\n      >\n        {children}\n      </ContentBadgeContext.Provider>\n    </TypographyComponent>\n  );\n};\n\nContentBadge.displayName = 'ContentBadge';\n\nContentBadge.SlotIcon = ContentBadgeSlotIcon;\nContentBadge.SlotIcon.displayName = 'ContentBadge.SlotIcon';\n"],"names":["React","classNames","Caption","Footnote","ContentBadgeContext","ContentBadgeSlotIcon","styles","appearanceClassNames","primary","secondary","outline","sizeClassNames","s","m","l","ContentBadge","appearance","mode","capsule","size","weight","className","children","restProps","TypographyComponent","normalize","Provider","value","isSingleChild","Children","count","displayName","SlotIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAE3D,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,SAASF,MAAM,CAAC,+BAA+B;QAC/CG,WAAWH,MAAM,CAAC,iCAAiC;QACnDI,SAASJ,MAAM,CAAC,+BAA+B;IACjD;IACA,WAAW;QACTE,SAASF,MAAM,CAAC,gCAAgC;QAChDG,WAAWH,MAAM,CAAC,kCAAkC;QACpDI,SAASJ,MAAM,CAAC,gCAAgC;IAClD;IACA,gBAAgB;QACdE,SAASF,MAAM,CAAC,qCAAqC;QACrDG,WAAWH,MAAM,CAAC,uCAAuC;QACzDI,SAASJ,MAAM,CAAC,qCAAqC;IACvD;IACA,cAAc;QACZE,SAASF,MAAM,CAAC,mCAAmC;QACnDG,WAAWH,MAAM,CAAC,qCAAqC;QACvDI,SAASJ,MAAM,CAAC,mCAAmC;IACrD;IACA,WAAW;QACTE,SAASF,MAAM,CAAC,gCAAgC;QAChDG,WAAWH,MAAM,CAAC,kCAAkC;QACpDI,SAASJ,MAAM,CAAC,gCAAgC;IAClD;AACF;AAEA,MAAMK,iBAAiB;IACrBC,GAAGN,MAAM,CAAC,uBAAuB;IACjCO,GAAGP,MAAM,CAAC,uBAAuB;IACjCQ,GAAGR,MAAM,CAAC,uBAAuB;AACnC;AA+BA;;;;;;;;;;CAUC,GACD,OAAO,MAAMS,eAAe,CAAC,EAC3BC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAMC,sBAAsBL,SAAS,MAAMhB,WAAWD;IAEtD,qBACE,KAACsB;QACE,GAAGD,SAAS;QACbH,QAAQA;QACRK,SAAS;QACTJ,WAAWpB,WACToB,WACAf,OAAOS,YAAY,EACnBI,SAAS,OAAOD,WAAWZ,MAAM,CAAC,wBAAwB,EAC1DW,SAAS,aAAaX,MAAM,CAAC,6BAA6B,EAC1DC,oBAAoB,CAACS,WAAW,CAACC,KAAK,EACtCN,cAAc,CAACQ,KAAK;kBAGtB,cAAA,KAACf,oBAAoBsB,QAAQ;YAC3BC,OAAO;gBAAEC,eAAe5B,MAAM6B,QAAQ,CAACC,KAAK,CAACR,cAAc;gBAAGH;YAAK;sBAElEG;;;AAIT,EAAE;AAEFP,aAAagB,WAAW,GAAG;AAE3BhB,aAAaiB,QAAQ,GAAG3B;AACxBU,aAAaiB,QAAQ,CAACD,WAAW,GAAG"}

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

@@ -0,0 +1,169 @@
+.ContentBadge {
+  isolation: isolate;
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  block-size: auto;
+
+  /**
+   * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
+   * из-за чего элементы при переполнении будут выходить за границы контейнера.
+   *
+   * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
+   */
+  min-inline-size: 0;
+}
+
+.ContentBadge--size-s {
+  min-block-size: 16px;
+  padding-block: 1px;
+  padding-inline: 4px;
+  border-radius: 4px;
+}
+
+.ContentBadge--size-m {
+  column-gap: 4px;
+  min-block-size: 20px;
+  padding-block: 3px;
+  padding-inline: 6px;
+  border-radius: 6px;
+}
+
+.ContentBadge__singleIcon-slot--size-m {
+  padding-block: 1px;
+  margin-inline: -2px;
+}
+
+.ContentBadge--size-l {
+  column-gap: 6px;
+  min-block-size: 28px;
+  padding-block: 6px;
+  padding-inline: 8px;
+  border-radius: 8px;
+}
+
+.ContentBadge__icon-slot--size-l {
+  -webkit-margin-start: -2px;
+          margin-inline-start: -2px;
+  -webkit-margin-end: -2px;
+          margin-inline-end: -2px;
+}
+
+.ContentBadge__singleIcon-slot--size-l {
+  margin-block: -2px;
+  margin-inline: -4px;
+}
+
+.ContentBadge--capsule {
+  border-radius: 48px;
+}
+
+/* mode="primary" */
+
+.ContentBadge--primary-accent {
+  color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_accent);
+}
+
+.ContentBadge--primary-neutral {
+  color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.ContentBadge--primary-accent-green {
+  color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_accent_green);
+}
+
+.ContentBadge--primary-accent-red {
+  color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_accent_red);
+}
+
+.ContentBadge--primary-overlay {
+  color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_overlay_primary);
+}
+
+/* mode="secondary" */
+
+.ContentBadge--secondary-accent {
+  color: var(--vkui--color_text_accent);
+  background-color: var(--vkui--color_background_secondary_alpha);
+}
+
+.ContentBadge--secondary-neutral {
+  color: var(--vkui--color_text_subhead);
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.ContentBadge--secondary-accent-green {
+  color: var(--vkui--color_accent_green);
+  background-color: var(--vkui--color_background_positive_tint);
+}
+
+.ContentBadge--secondary-accent-red {
+  color: var(--vkui--color_accent_red);
+  background-color: var(--vkui--color_background_negative_tint);
+}
+
+.ContentBadge--secondary-overlay {
+  color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_overlay_secondary);
+}
+
+/* mode="outline" */
+
+.ContentBadge--mode-outline::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: inherit;
+}
+
+.ContentBadge--outline-accent {
+  color: var(--vkui--color_text_accent);
+}
+
+.ContentBadge--outline-accent::before {
+  border-color: var(--vkui--color_stroke_accent);
+}
+
+.ContentBadge--outline-neutral {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ContentBadge--outline-neutral::before {
+  border-color: var(--vkui--color_icon_secondary);
+}
+
+.ContentBadge--outline-accent-green {
+  color: var(--vkui--color_accent_green);
+}
+
+.ContentBadge--outline-accent-green::before {
+  border-color: currentColor;
+}
+
+.ContentBadge--outline-accent-red {
+  color: var(--vkui--color_accent_red);
+}
+
+.ContentBadge--outline-accent-red::before {
+  border-color: currentColor;
+}
+
+.ContentBadge--outline-overlay {
+  color: var(--vkui--color_text_contrast);
+}
+
+.ContentBadge--outline-overlay::before {
+  border-width: 0;
+  background-color: var(--vkui--color_overlay_primary);
+}

package/dist/cssm/components/ContentBadge/ContentBadgeContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ContentBadgeSizeType } from './types';
+/**
+ * Контекст для внутреннего использовния.
+ * @private
+ */
+export declare const ContentBadgeContext: React.Context<{
+    isSingleChild: boolean;
+    size: ContentBadgeSizeType;
+}>;
+//# sourceMappingURL=ContentBadgeContext.d.ts.map

package/dist/cssm/components/ContentBadge/ContentBadgeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentBadgeContext.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentBadge/ContentBadgeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,mBAAmB;mBACf,OAAO;UAChB,oBAAoB;EAI1B,CAAC"}

package/dist/cssm/components/ContentBadge/ContentBadgeContext.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Контекст для внутреннего использовния.
+ * @private
+ */ export const ContentBadgeContext = /*#__PURE__*/ React.createContext({
+    isSingleChild: false,
+    size: 'm'
+});
+
+//# sourceMappingURL=ContentBadgeContext.js.map

package/dist/cssm/components/ContentBadge/ContentBadgeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ContentBadgeSizeType } from './types';\n\n/**\n * Контекст для внутреннего использовния.\n * @private\n */\nexport const ContentBadgeContext = React.createContext<{\n  isSingleChild: boolean;\n  size: ContentBadgeSizeType;\n}>({\n  isSingleChild: false,\n  size: 'm',\n});\n"],"names":["React","ContentBadgeContext","createContext","isSingleChild","size"],"rangeMappings":";;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;;CAGC,GACD,OAAO,MAAMC,oCAAsBD,MAAME,aAAa,CAGnD;IACDC,eAAe;IACfC,MAAM;AACR,GAAG"}

package/dist/cssm/components/ContentBadge/ContentBadgeSlotIcon.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributesWithRootRef } from '../../types';
+export type ContentBadgeSlotIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export declare const ContentBadgeSlotIcon: {
+    ({ className, getRootRef, children, ...restProps }: ContentBadgeSlotIconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=ContentBadgeSlotIcon.d.ts.map