@vkontakte/vkui 7.5.4 → 7.6.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения ячейки:\n   *\n   * - \"removable\": добавляется кнопка для удаления\n   * - \"selectable\": добавляется чекбокс для выбора.\n   */\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.\n   */\n  draggable?: boolean;\n  /**\n   * Имя для `input` в режиме `selectable`.\n   */\n  name?: string;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.\n   */\n  checked?: boolean;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Обработчик, срабатывающий при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки.\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkui.io/components/cell\n */\nexport const Cell: React.FC<CellProps> & {\n  Checkbox: typeof CellCheckbox;\n} = ({\n  mode,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = (\n      <CellCheckbox\n        className={classNames(styles.checkbox, !before && styles.controlNoBefore)}\n        {...checkboxProps}\n      />\n    );\n  }\n\n  const hasActive = !disabled && !dragging;\n\n  const cellClasses = classNames(\n    styles.host,\n    dragging && styles.dragging,\n    platform === 'ios' && styles.ios,\n    removable && styles.removable,\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    disabled,\n    ...restProps,\n    className: styles.content,\n    // чтобы свойство, если не определено, не присутствовало в\n    // restProps явно как {'Component': undefined} и ниже не переопределяло\n    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n    // {...commonProps, ...restProps}\n    ...(Component && { Component }),\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\n    ),\n  };\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove?.(e, rootElRef.current)}\n        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n        disabled={disabled}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            return (\n              <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n            );\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","useState","selectable","removable","platform","rootElRef","dragger","elRef","controlNoBefore","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","host","ios","simpleCellProps","hasHover","content","Fragment","e","current","isRemoving","onClick","undefined","div","ref","Checkbox"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения ячейки:\n   *\n   * - \"removable\": добавляется кнопка для удаления\n   * - \"selectable\": добавляется чекбокс для выбора.\n   */\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.\n   */\n  draggable?: boolean;\n  /**\n   * Имя для `input` в режиме `selectable`.\n   */\n  name?: string;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.\n   */\n  checked?: boolean;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Обработчик, срабатывающий при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки.\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkui.io/components/cell\n */\nexport const Cell: React.FC<CellProps> & {\n  Checkbox: typeof CellCheckbox;\n} = ({\n  mode,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  href: hrefProp,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n  const href = selectable ? undefined : hrefProp;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = (\n      <CellCheckbox\n        className={classNames(styles.checkbox, !before && styles.controlNoBefore)}\n        {...checkboxProps}\n      />\n    );\n  }\n\n  const hasActive = !disabled && !dragging;\n\n  const cellClasses = classNames(\n    styles.host,\n    dragging && styles.dragging,\n    platform === 'ios' && styles.ios,\n    removable && styles.removable,\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    disabled,\n    href,\n    ...restProps,\n    className: styles.content,\n    // чтобы свойство, если не определено, не присутствовало в\n    // restProps явно как {'Component': undefined} и ниже не переопределяло\n    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n    // {...commonProps, ...restProps}\n    ...(Component && { Component }),\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\n    ),\n  };\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove?.(e, rootElRef.current)}\n        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n        disabled={disabled}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            return (\n              <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n            );\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","href","hrefProp","restProps","dragging","setDragging","useState","selectable","removable","undefined","platform","rootElRef","dragger","elRef","controlNoBefore","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","host","ios","simpleCellProps","hasHover","content","Fragment","e","current","isRemoving","onClick","div","ref","Checkbox"],"mappings":"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"}

package/dist/cssm/components/Checkbox/Checkbox.js

@@ -5,7 +5,7 @@ import { SelectionControl } from "../SelectionControl/SelectionControl.js";
 import { SelectionControlLabel } from "../SelectionControl/SelectionControlLabel/SelectionControlLabel.js";
 import { CheckboxInput } from "./CheckboxInput/CheckboxInput.js";
 import { CheckboxSimple } from "./CheckboxSimple/CheckboxSimple.js";
-const CheckboxComponent = ({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, ...restProps })=>{
+const CheckboxComponent = ({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding, ...restProps })=>{
     return /*#__PURE__*/ _jsxs(SelectionControl, {
         className: className,
         style: style,
@@ -16,6 +16,7 @@ const CheckboxComponent = ({ children, className, style, getRootRef, description
         hasHover: hasHover,
         hasActive: hasActive,
         focusVisibleMode: focusVisibleMode,
+        noPadding: noPadding,
         children: [
             /*#__PURE__*/ _jsx(CheckboxInput, {
                 ...restProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n  extends Omit<CheckboxInputProps, 'getRootRef'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Подпись под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Контент, идущий за основным текстом.\n   */\n  titleAfter?: React.ReactNode;\n}\n\nconst CheckboxComponent = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  ...restProps\n}: CheckboxProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <CheckboxInput {...restProps} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\n/**\n * @see https://vkui.io/components/checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n  const simple = !(hasReactNode(props.children) || hasReactNode(props.description));\n  if (simple) {\n    return <CheckboxSimple {...props} />;\n  }\n\n  return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,aAAa,QAAiC,mCAAgC;AACvF,SAASC,cAAc,QAAQ,qCAAkC;AAmBjE,MAAMC,oBAAoB,CAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACV,GAAGC,WACW;IACd,qBACE,MAAChB;QACCM,WAAWA;QACXC,OAAOA;QACPU,UAAUD,UAAUC,QAAQ;QAC5BT,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;;0BAElB,KAACZ;gBAAe,GAAGc,SAAS;;0BAC5B,KAACf;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMa,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAErB,CAAAA,aAAaoB,MAAMd,QAAQ,KAAKN,aAAaoB,MAAMV,WAAW,CAAA;IAC/E,IAAIW,QAAQ;QACV,qBAAO,KAACjB;YAAgB,GAAGgB,KAAK;;IAClC;IAEA,qBAAO,KAACf;QAAmB,GAAGe,KAAK;;AACrC,EAAE;AAEFD,SAASG,KAAK,GAAGnB"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n  extends Omit<CheckboxInputProps, 'getRootRef'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Подпись под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Контент, идущий за основным текстом.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * Отключает отступы у чекбокса. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `\"opacity\"`.\n   */\n  noPadding?: boolean;\n}\n\nconst CheckboxComponent = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  noPadding,\n  ...restProps\n}: CheckboxProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      noPadding={noPadding}\n    >\n      <CheckboxInput {...restProps} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\n/**\n * @see https://vkui.io/components/checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n  const simple = !(hasReactNode(props.children) || hasReactNode(props.description));\n  if (simple) {\n    return <CheckboxSimple {...props} />;\n  }\n\n  return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","noPadding","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,aAAa,QAAiC,mCAAgC;AACvF,SAASC,cAAc,QAAQ,qCAAkC;AAuBjE,MAAMC,oBAAoB,CAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,SAAS,EACT,GAAGC,WACW;IACd,qBACE,MAACjB;QACCM,WAAWA;QACXC,OAAOA;QACPW,UAAUD,UAAUC,QAAQ;QAC5BV,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBE,WAAWA;;0BAEX,KAACd;gBAAe,GAAGe,SAAS;;0BAC5B,KAAChB;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMc,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAEtB,CAAAA,aAAaqB,MAAMf,QAAQ,KAAKN,aAAaqB,MAAMX,WAAW,CAAA;IAC/E,IAAIY,QAAQ;QACV,qBAAO,KAAClB;YAAgB,GAAGiB,KAAK;;IAClC;IAEA,qBAAO,KAAChB;QAAmB,GAAGgB,KAAK;;AACrC,EAAE;AAEFD,SAASG,KAAK,GAAGpB"}

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js

@@ -9,10 +9,12 @@ const sizeYClassNames = {
     none: styles.sizeYNone,
     compact: styles.sizeYCompact
 };
-export function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, ...restProps }) {
+export function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode: hoverModeProp, activeMode: activeModeProp, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding, ...restProps }) {
     const { sizeY = 'none' } = useAdaptivity();
+    const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');
+    const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');
     return /*#__PURE__*/ _jsx(Tappable, {
-        className: classNames(className, styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY]),
+        className: classNames(className, styles.host, !noPadding && styles.withPadding, sizeY !== 'regular' && sizeYClassNames[sizeY]),
         style: style,
         disabled: restProps.disabled,
         getRootRef: getRootRef,

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { Tappable } from '../../Tappable/Tappable';\nimport type { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      className={classNames(className, styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      Component=\"label\"\n    >\n      <CheckboxInput {...restProps} />\n    </Tappable>\n  );\n}\n"],"names":["classNames","useAdaptivity","Tappable","CheckboxInput","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","CheckboxSimple","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","sizeY","host","disabled","Component"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACV,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGtB;IAE3B,qBACE,KAACC;QACCU,WAAWZ,WAAWY,WAAWR,OAAOoB,IAAI,EAAED,UAAU,aAAalB,eAAe,CAACkB,MAAM;QAC3FV,OAAOA;QACPY,UAAUH,UAAUG,QAAQ;QAC5BX,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBM,WAAU;kBAEV,cAAA,KAACvB;YAAe,GAAGmB,SAAS;;;AAGlC"}
+{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { Tappable } from '../../Tappable/Tappable';\nimport type { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode: hoverModeProp,\n  activeMode: activeModeProp,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  noPadding,\n  ...restProps\n}: CheckboxProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');\n  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');\n\n  return (\n    <Tappable\n      className={classNames(\n        className,\n        styles.host,\n        !noPadding && styles.withPadding,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      Component=\"label\"\n    >\n      <CheckboxInput {...restProps} />\n    </Tappable>\n  );\n}\n"],"names":["classNames","useAdaptivity","Tappable","CheckboxInput","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","CheckboxSimple","children","className","style","getRootRef","description","hoverMode","hoverModeProp","activeMode","activeModeProp","hasHover","hasActive","focusVisibleMode","titleAfter","noPadding","restProps","sizeY","host","withPadding","disabled","Component"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,SAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAMe,YAAYC,iBAAkBO,CAAAA,YAAY,YAAY,YAAW;IACvE,MAAMN,aAAaC,kBAAmBK,CAAAA,YAAY,YAAY,YAAW;IAEzE,qBACE,KAACtB;QACCU,WAAWZ,WACTY,WACAR,OAAOuB,IAAI,EACX,CAACH,aAAapB,OAAOwB,WAAW,EAChCF,UAAU,aAAarB,eAAe,CAACqB,MAAM;QAE/Cb,OAAOA;QACPgB,UAAUJ,UAAUI,QAAQ;QAC5Bf,YAAYA;QACZE,WAAWA;QACXE,YAAYA;QACZE,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBQ,WAAU;kBAEV,cAAA,KAAC3B;YAAe,GAAGsB,SAAS;;;AAGlC"}

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css

@@ -2,6 +2,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: -webkit-fit-content;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+  block-size: -webkit-fit-content;
+  block-size: -moz-fit-content;
+  block-size: fit-content;
+}
+
+.withPadding {
   inline-size: var(--vkui--size_field_height--regular);
   block-size: var(--vkui--size_field_height--regular);
   border-radius: 50%;
@@ -15,13 +24,13 @@
  * sizeY COMPACT
  */
 
-.sizeYCompact {
+.withPadding.sizeYCompact {
   inline-size: var(--vkui--size_field_height--compact);
   block-size: var(--vkui--size_field_height--compact);
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .sizeYNone {
+  .withPadding.sizeYNone {
     inline-size: var(--vkui--size_field_height--compact);
     block-size: var(--vkui--size_field_height--compact);
   }

package/dist/cssm/components/ChipsInputBase/Chip/Chip.js

@@ -14,9 +14,13 @@ const sizeYClassNames = {
     none: styles.sizeYNone,
     compact: styles.sizeYCompact
 };
+const modeClassNames = {
+    primary: styles.modePrimary,
+    secondary: styles.modeSecondary
+};
 /**
  * @see https://vkui.io/components/chip
- */ export const Chip = ({ Component = 'span', value = '', removable = true, onRemove, removeLabel = 'Удалить', before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps })=>{
+ */ export const Chip = ({ mode = 'primary', Component = 'span', value = '', removable = true, onRemove, removeLabel = 'Удалить', before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const { focusVisible, onFocus, onBlur } = useFocusVisible();
     const focusVisibleClassName = useFocusVisibleClassName({
@@ -43,7 +47,7 @@ const sizeYClassNames = {
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
         Component: Component,
-        className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], focusVisibleClassName, className),
+        className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], modeClassNames[mode], focusVisibleClassName, className),
         "aria-readonly": readOnly,
         "aria-disabled": disabled,
         onFocus: disabled ? undefined : handleFocus,

package/dist/cssm/components/ChipsInputBase/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkui.io/components/chip\n */\nexport const Chip = ({\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            type=\"button\"\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","host","aria-readonly","aria-disabled","undefined","div","in","content","button","type","tabIndex","remove","onClick"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAErE,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM,EAAE8B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGzB;IAC1C,MAAM8B,wBAAwB7B,yBAAyB;QAAE4B;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBvC,MAAMwC,WAAW,CACvC,CAACH;QACCjB,WAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACX;QACE,GAAGyB,SAAS;QACbf,WAAWA;QACXU,WAAWzB,WACTQ,OAAO+B,IAAI,EACXR,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CE,uBACAR;QAEFe,iBAAejB;QACfkB,iBAAenB;QACfI,SAASJ,WAAWoB,YAAYR;QAChCN,QAAQN,WAAWoB,YAAYN;;0BAE/B,MAACO;gBAAIlB,WAAWjB,OAAOoC,EAAE;;oBACtB3C,aAAamB,yBAAW,KAACuB;wBAAIlB,WAAWjB,OAAOY,MAAM;kCAAGA;;kCACzD,KAACd;wBAASmB,WAAWjB,OAAOqC,OAAO;kCAAGrB;;oBACrCvB,aAAaoB,wBAAU,KAACsB;wBAAIlB,WAAWjB,OAAOa,KAAK;kCAAGA;;;;YAExD,CAACE,YAAYN,2BACZ,KAAC0B;gBAAIlB,WAAWjB,OAAOS,SAAS;0BAC9B,cAAA,MAAC6B;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACX1B,UAAUA;oBACVG,WAAWjB,OAAOyC,MAAM;oBACxBC,SAAS5B,WAAWoB,YAAYL;;sCAEhC,MAAC9B;;gCAAe;gCACNY;gCAAY;gCAAEK;;;sCAExB,KAACzB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n  type HasComponent,\n  type HasDataAttribute,\n  type HTMLAttributesWithRootRef,\n} from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { type ChipOptionValue } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nconst modeClassNames = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n} as const;\n\nexport interface ChipProps\n  extends HasComponent,\n    HasDataAttribute,\n    HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary';\n  /**\n   * Значение чипа.\n   */\n  value?: ChipOptionValue;\n  /**\n   * Можно ли удалить чип.\n   */\n  removable?: boolean;\n  /**\n   * Блокировка взаимодействия с чипом.\n   */\n  disabled?: boolean;\n  /**\n   * Режим только для чтения.\n   */\n  readOnly?: boolean;\n  /**\n   * Текст для кнопки удаления.\n   */\n  removeLabel?: string;\n  /**\n   * Контент перед основным содержимым.\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент после основного содержимого.\n   */\n  after?: React.ReactNode;\n  /**\n   * Обработчик удаления чипа.\n   */\n  onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\n/**\n * @see https://vkui.io/components/chip\n */\nexport const Chip = ({\n  mode = 'primary',\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        modeClassNames[mode],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            type=\"button\"\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","modeClassNames","primary","modePrimary","secondary","modeSecondary","Chip","mode","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","host","aria-readonly","aria-disabled","undefined","div","in","content","button","type","tabIndex","remove","onClick"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AAMnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAErE,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,iBAAiB;IACrBC,SAASP,OAAOQ,WAAW;IAC3BC,WAAWT,OAAOU,aAAa;AACjC;AA4CA;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,OAAO,SAAS,EAChBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGnC;IAC3B,MAAM,EAAEoC,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAG/B;IAC1C,MAAMoC,wBAAwBnC,yBAAyB;QAAEkC;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkB7C,MAAM8C,WAAW,CACvC,CAACH;QACCjB,WAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACjB;QACE,GAAG+B,SAAS;QACbf,WAAWA;QACXU,WAAW/B,WACTQ,OAAOqC,IAAI,EACXR,UAAU,aAAa5B,eAAe,CAAC4B,MAAM,EAC7CvB,cAAc,CAACM,KAAK,EACpBmB,uBACAR;QAEFe,iBAAejB;QACfkB,iBAAenB;QACfI,SAASJ,WAAWoB,YAAYR;QAChCN,QAAQN,WAAWoB,YAAYN;;0BAE/B,MAACO;gBAAIlB,WAAWvB,OAAO0C,EAAE;;oBACtBjD,aAAayB,yBAAW,KAACuB;wBAAIlB,WAAWvB,OAAOkB,MAAM;kCAAGA;;kCACzD,KAACpB;wBAASyB,WAAWvB,OAAO2C,OAAO;kCAAGrB;;oBACrC7B,aAAa0B,wBAAU,KAACsB;wBAAIlB,WAAWvB,OAAOmB,KAAK;kCAAGA;;;;YAExD,CAACE,YAAYN,2BACZ,KAAC0B;gBAAIlB,WAAWvB,OAAOe,SAAS;0BAC9B,cAAA,MAAC6B;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACX1B,UAAUA;oBACVG,WAAWvB,OAAO+C,MAAM;oBACxBC,SAAS5B,WAAWoB,YAAYL;;sCAEhC,MAACpC;;gCAAe;gCACNkB;gCAAY;gCAAEK;;;sCAExB,KAAC/B;;;;;;AAMb,EAAE"}

package/dist/cssm/components/ChipsInputBase/Chip/Chip.module.css

@@ -3,9 +3,16 @@
   display: inline-flex;
   align-items: center;
   block-size: 32px;
+  border-radius: 6px;
+}
+
+.modePrimary {
   background: var(--vkui--color_background_content);
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
-  border-radius: 6px;
+}
+
+.modeSecondary {
+  background: var(--vkui--color_background_secondary);
 }
 
 .in,

package/dist/cssm/components/ChipsInputBase/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  HasAlign,\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\n\nexport type NavigateTo = 'prev' | 'next' | 'last' | 'first';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n  /**\n   * Значение опции.\n   */\n  value: ChipOptionValue;\n  /**\n   * Отображаемый текст опции.\n   */\n  label: ChipOptionLabel;\n  /**\n   * Блокировка взаимодействия с оцией.\n   */\n  disabled?: boolean;\n  [index: string]: any;\n};\n\nexport interface ChipProps\n  extends HasComponent,\n    HasDataAttribute,\n    HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Значение чипа.\n   */\n  value?: ChipOptionValue;\n  /**\n   * Можно ли удалить чип.\n   */\n  removable?: boolean;\n  /**\n   * Блокировка взаимодействия с чипом.\n   */\n  disabled?: boolean;\n  /**\n   * Режим только для чтения.\n   */\n  readOnly?: boolean;\n  /**\n   * Текст для кнопки удаления.\n   */\n  removeLabel?: string;\n  /**\n   * Контент перед основным содержимым.\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент после основного содержимого.\n   */\n  after?: React.ReactNode;\n  /**\n   * Обработчик удаления чипа.\n   */\n  onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n  /**\n   * Отображаемый текст чипа.\n   */\n  label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n  props: RenderChipProps,\n  option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n  value: ChipOptionValue,\n  label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Выбранные опции.\n   */\n  value?: O[];\n  /**\n   * Выбранные опции по умолчанию.\n   */\n  defaultValue?: O[];\n  /**\n   * Обработчик изменения выбранных опций.\n   */\n  onChange?: OnChange<O>;\n  /**\n   * Значение поля ввода.\n   */\n  inputValue?: string;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultInputValue?: string;\n  /**\n   * Обработчик изменения значения в поле ввода.\n   */\n  onInputChange?: OnInputChange;\n  /**\n   * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.\n   * Принимает:\n   * - `string` - простая строка\n   * - `RegExp` - регулярное выражение\n   * - `string[]` - массив строк, по которым нужно разелять ввод.\n   *\n   * Работает в двух сценариях:\n   * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.\n   *    Например, при `delimiter=\",\"` ввод \"опция1,\" создаст опцию \"опция1\".\n   *\n   * 2. При вставке из буфера обмена - если вставляемый текст содержит разделители,\n   *    он будет автоматически разбит на несколько опций.\n   *    Например, при `delimiter=\",\"` вставка \"опция1,опция2,опция3\" создаст\n   *    три отдельные опции: \"опция1\", \"опция2\" и \"опция3\".\n   */\n  delimiter?: string | RegExp | string[];\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n  UseChipsInputBaseProps<O>,\n  'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputBaseOnlyNeededProps<O>,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n    >,\n    HasRef<HTMLInputElement>,\n    HasAlign {\n  /**\n   * Ссылка на корневой элемент.\n   */\n  getRootRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Добавляет значение в список на событие `onBlur`.\n   */\n  addOnBlur?: boolean;\n  /**\n   * Render prop функция для возврата своего компонента.\n   *\n   * @default Используется [Chip](#/Chip)\n   */\n  renderChip?: RenderChip<O>;\n  /**\n   * Показывать ли кнопку для очистки значения.\n   */\n  clearButtonShown?: boolean;\n  /**\n   * (e2e) testId кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Кастомная кнопка для очистки значения.\n   * Должна принимать обязательное свойство `onClick`.\n   */\n  ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n  /**\n   * `aria-label` для списка выбранных опций.\n   */\n  chipsListLabel?: string;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n  extends ChipsInputBaseProps<O>,\n    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {\n  /**\n   * Обработчик очистки всех выбранных опций.\n   */\n  onClear: () => void;\n  /**\n   * Обработчик добавления новой опции чипа.\n   */\n  onAddChipOption: (value: string) => void;\n  /**\n   * Обработчик удаления опции чипа.\n   */\n  onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"AAuMA;;CAEC,GACD,WAeC"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasAlign, HasRef } from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\nimport { type ChipProps } from './Chip/Chip';\n\nexport type NavigateTo = 'prev' | 'next' | 'last' | 'first';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n  /**\n   * Значение опции.\n   */\n  value: ChipOptionValue;\n  /**\n   * Отображаемый текст опции.\n   */\n  label: ChipOptionLabel;\n  /**\n   * Блокировка взаимодействия с оцией.\n   */\n  disabled?: boolean;\n  [index: string]: any;\n};\n\nexport interface RenderChipProps extends ChipProps {\n  /**\n   * Отображаемый текст чипа.\n   */\n  label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n  props: RenderChipProps,\n  option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n  value: ChipOptionValue,\n  label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Выбранные опции.\n   */\n  value?: O[];\n  /**\n   * Выбранные опции по умолчанию.\n   */\n  defaultValue?: O[];\n  /**\n   * Обработчик изменения выбранных опций.\n   */\n  onChange?: OnChange<O>;\n  /**\n   * Значение поля ввода.\n   */\n  inputValue?: string;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultInputValue?: string;\n  /**\n   * Обработчик изменения значения в поле ввода.\n   */\n  onInputChange?: OnInputChange;\n  /**\n   * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.\n   * Принимает:\n   * - `string` - простая строка\n   * - `RegExp` - регулярное выражение\n   * - `string[]` - массив строк, по которым нужно разелять ввод.\n   *\n   * Работает в двух сценариях:\n   * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.\n   *    Например, при `delimiter=\",\"` ввод \"опция1,\" создаст опцию \"опция1\".\n   *\n   * 2. При вставке из буфера обмена - если вставляемый текст содержит разделители,\n   *    он будет автоматически разбит на несколько опций.\n   *    Например, при `delimiter=\",\"` вставка \"опция1,опция2,опция3\" создаст\n   *    три отдельные опции: \"опция1\", \"опция2\" и \"опция3\".\n   */\n  delimiter?: string | RegExp | string[];\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n  UseChipsInputBaseProps<O>,\n  'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputBaseOnlyNeededProps<O>,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n    >,\n    HasRef<HTMLInputElement>,\n    HasAlign {\n  /**\n   * Ссылка на корневой элемент.\n   */\n  getRootRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Добавляет значение в список на событие `onBlur`.\n   */\n  addOnBlur?: boolean;\n  /**\n   * Render prop функция для возврата своего компонента.\n   *\n   * @default Используется [Chip](#/Chip)\n   */\n  renderChip?: RenderChip<O>;\n  /**\n   * Показывать ли кнопку для очистки значения.\n   */\n  clearButtonShown?: boolean;\n  /**\n   * (e2e) testId кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Кастомная кнопка для очистки значения.\n   * Должна принимать обязательное свойство `onClick`.\n   */\n  ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n  /**\n   * `aria-label` для списка выбранных опций.\n   */\n  chipsListLabel?: string;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n  extends ChipsInputBaseProps<O>,\n    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {\n  /**\n   * Обработчик очистки всех выбранных опций.\n   */\n  onClear: () => void;\n  /**\n   * Обработчик добавления новой опции чипа.\n   */\n  onAddChipOption: (value: string) => void;\n  /**\n   * Обработчик удаления опции чипа.\n   */\n  onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"AA4JA;;CAEC,GACD,WAeC"}

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

@@ -1,9 +1,13 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
-import { Caption } from "../Typography/Caption/Caption.js";
-import { Footnote } from "../Typography/Footnote/Footnote.js";
+import { Tappable } from "../Tappable/Tappable.js";
+import { captionClassNames } from "../Typography/Caption/Caption.js";
+import { footnoteClassNames } from "../Typography/Footnote/Footnote.js";
+import { weightClassNames } from "../Typography/Typography.js";
 import { ContentBadgeContext } from "./ContentBadgeContext.js";
 import { ContentBadgeIconSlot } from "./ContentBadgeIconSlot.js";
 import styles from "./ContentBadge.module.css";
@@ -47,13 +51,15 @@ const sizeClassNames = {
  *
  * @since 6.1.0
  * @see https://vkui.io/components/content-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, {
+ */ export const ContentBadge = ({ appearance = 'accent', mode = 'primary', capsule, size = 'm', weight = '2', children, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
+    const typographyClassNames = size === 'l' ? footnoteClassNames(sizeY) : captionClassNames(sizeY);
+    return /*#__PURE__*/ _jsx(Tappable, {
+        baseClassName: classNames(styles.host, size !== 's' && capsule && styles.capsule, mode === 'outline' && styles.modeOutline, appearanceClassNames[appearance][mode], sizeClassNames[size], typographyClassNames, weightClassNames(weight)),
+        DefaultComponent: "span",
+        hoverMode: "opacity",
+        activeMode: "opacity",
         ...restProps,
-        weight: weight,
-        normalize: true,
-        className: classNames(className, styles.host, size !== 's' && capsule && styles.capsule, mode === 'outline' && styles.modeOutline, appearanceClassNames[appearance][mode], sizeClassNames[size]),
         children: /*#__PURE__*/ _jsx(ContentBadgeContext.Provider, {
             value: {
                 isSingleChild: React.Children.count(children) === 1,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport type { TypographyProps } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeIconSlot } from './ContentBadgeIconSlot';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n  'accent': {\n    primary: styles.primaryAccent,\n    secondary: styles.secondaryAccent,\n    outline: styles.outlineAccent,\n  },\n  'neutral': {\n    primary: styles.primaryNeutral,\n    secondary: styles.secondaryNeutral,\n    outline: styles.outlineNeutral,\n  },\n  'accent-green': {\n    primary: styles.primaryAccentGreen,\n    secondary: styles.secondaryAccentGreen,\n    outline: styles.outlineAccentGreen,\n  },\n  'accent-red': {\n    primary: styles.primaryAccentRed,\n    secondary: styles.secondaryAccentRed,\n    outline: styles.outlineAccentRed,\n  },\n  'overlay': {\n    primary: styles.primaryOverlay,\n    secondary: styles.secondaryOverlay,\n    outline: styles.outlineOverlay,\n  },\n};\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\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://vkui.io/components/content-badge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n  IconSlot: typeof ContentBadgeIconSlot;\n  /**\n   * @deprecated Since 7.3.4. Используйте `IconSlot`.\n   */\n  SlotIcon: typeof ContentBadgeIconSlot;\n} = ({\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.host,\n        size !== 's' && capsule && styles.capsule,\n        mode === 'outline' && styles.modeOutline,\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.IconSlot = ContentBadgeIconSlot;\nContentBadge.SlotIcon = ContentBadgeIconSlot;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ContentBadge.IconSlot, 'ContentBadge.IconSlot');\n  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","defineComponentDisplayNames","Caption","Footnote","ContentBadgeContext","ContentBadgeIconSlot","styles","appearanceClassNames","primary","primaryAccent","secondary","secondaryAccent","outline","outlineAccent","primaryNeutral","secondaryNeutral","outlineNeutral","primaryAccentGreen","secondaryAccentGreen","outlineAccentGreen","primaryAccentRed","secondaryAccentRed","outlineAccentRed","primaryOverlay","secondaryOverlay","outlineOverlay","sizeClassNames","s","sizeS","m","sizeM","l","sizeL","ContentBadge","appearance","mode","capsule","size","weight","className","children","restProps","TypographyComponent","normalize","host","modeOutline","Provider","value","isSingleChild","Children","count","IconSlot","SlotIcon","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAE3D,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,SAASF,OAAOG,aAAa;QAC7BC,WAAWJ,OAAOK,eAAe;QACjCC,SAASN,OAAOO,aAAa;IAC/B;IACA,WAAW;QACTL,SAASF,OAAOQ,cAAc;QAC9BJ,WAAWJ,OAAOS,gBAAgB;QAClCH,SAASN,OAAOU,cAAc;IAChC;IACA,gBAAgB;QACdR,SAASF,OAAOW,kBAAkB;QAClCP,WAAWJ,OAAOY,oBAAoB;QACtCN,SAASN,OAAOa,kBAAkB;IACpC;IACA,cAAc;QACZX,SAASF,OAAOc,gBAAgB;QAChCV,WAAWJ,OAAOe,kBAAkB;QACpCT,SAASN,OAAOgB,gBAAgB;IAClC;IACA,WAAW;QACTd,SAASF,OAAOiB,cAAc;QAC9Bb,WAAWJ,OAAOkB,gBAAgB;QAClCZ,SAASN,OAAOmB,cAAc;IAChC;AACF;AAEA,MAAMC,iBAAiB;IACrBC,GAAGrB,OAAOsB,KAAK;IACfC,GAAGvB,OAAOwB,KAAK;IACfC,GAAGzB,OAAO0B,KAAK;AACjB;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAMT,CAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAMC,sBAAsBL,SAAS,MAAMlC,WAAWD;IAEtD,qBACE,KAACwC;QACE,GAAGD,SAAS;QACbH,QAAQA;QACRK,SAAS;QACTJ,WAAWvC,WACTuC,WACAjC,OAAOsC,IAAI,EACXP,SAAS,OAAOD,WAAW9B,OAAO8B,OAAO,EACzCD,SAAS,aAAa7B,OAAOuC,WAAW,EACxCtC,oBAAoB,CAAC2B,WAAW,CAACC,KAAK,EACtCT,cAAc,CAACW,KAAK;kBAGtB,cAAA,KAACjC,oBAAoB0C,QAAQ;YAC3BC,OAAO;gBAAEC,eAAejD,MAAMkD,QAAQ,CAACC,KAAK,CAACV,cAAc;gBAAGH;YAAK;sBAElEG;;;AAIT,EAAE;AAEFP,aAAakB,QAAQ,GAAG9C;AACxB4B,aAAamB,QAAQ,GAAG/C;AAExB,IAAIgD,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCtD,4BAA4BgC,aAAakB,QAAQ,EAAE;IACnDlD,4BAA4BgC,aAAamB,QAAQ,EAAE;AACrD"}
+{"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { captionClassNames } from '../Typography/Caption/Caption';\nimport { footnoteClassNames } from '../Typography/Footnote/Footnote';\nimport { type TypographyProps, weightClassNames } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeIconSlot } from './ContentBadgeIconSlot';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n  'accent': {\n    primary: styles.primaryAccent,\n    secondary: styles.secondaryAccent,\n    outline: styles.outlineAccent,\n  },\n  'neutral': {\n    primary: styles.primaryNeutral,\n    secondary: styles.secondaryNeutral,\n    outline: styles.outlineNeutral,\n  },\n  'accent-green': {\n    primary: styles.primaryAccentGreen,\n    secondary: styles.secondaryAccentGreen,\n    outline: styles.outlineAccentGreen,\n  },\n  'accent-red': {\n    primary: styles.primaryAccentRed,\n    secondary: styles.secondaryAccentRed,\n    outline: styles.outlineAccentRed,\n  },\n  'overlay': {\n    primary: styles.primaryOverlay,\n    secondary: styles.secondaryOverlay,\n    outline: styles.outlineOverlay,\n  },\n};\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\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://vkui.io/components/content-badge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n  IconSlot: typeof ContentBadgeIconSlot;\n  /**\n   * @deprecated Since 7.3.4. Используйте `IconSlot`.\n   */\n  SlotIcon: typeof ContentBadgeIconSlot;\n} = ({\n  appearance = 'accent',\n  mode = 'primary',\n  capsule,\n  size = 'm',\n  weight = '2',\n  children,\n  ...restProps\n}: ContentBadgeProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const typographyClassNames = size === 'l' ? footnoteClassNames(sizeY) : captionClassNames(sizeY);\n\n  return (\n    <Tappable\n      baseClassName={classNames(\n        styles.host,\n        size !== 's' && capsule && styles.capsule,\n        mode === 'outline' && styles.modeOutline,\n        appearanceClassNames[appearance][mode],\n        sizeClassNames[size],\n        typographyClassNames,\n        weightClassNames(weight),\n      )}\n      DefaultComponent=\"span\"\n      hoverMode=\"opacity\"\n      activeMode=\"opacity\"\n      {...restProps}\n    >\n      <ContentBadgeContext.Provider\n        value={{ isSingleChild: React.Children.count(children) === 1, size }}\n      >\n        {children}\n      </ContentBadgeContext.Provider>\n    </Tappable>\n  );\n};\n\nContentBadge.IconSlot = ContentBadgeIconSlot;\nContentBadge.SlotIcon = ContentBadgeIconSlot;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ContentBadge.IconSlot, 'ContentBadge.IconSlot');\n  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","useAdaptivity","defineComponentDisplayNames","Tappable","captionClassNames","footnoteClassNames","weightClassNames","ContentBadgeContext","ContentBadgeIconSlot","styles","appearanceClassNames","primary","primaryAccent","secondary","secondaryAccent","outline","outlineAccent","primaryNeutral","secondaryNeutral","outlineNeutral","primaryAccentGreen","secondaryAccentGreen","outlineAccentGreen","primaryAccentRed","secondaryAccentRed","outlineAccentRed","primaryOverlay","secondaryOverlay","outlineOverlay","sizeClassNames","s","sizeS","m","sizeM","l","sizeL","ContentBadge","appearance","mode","capsule","size","weight","children","restProps","sizeY","typographyClassNames","baseClassName","host","modeOutline","DefaultComponent","hoverMode","activeMode","Provider","value","isSingleChild","Children","count","IconSlot","SlotIcon","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,kBAAkB,QAAQ,qCAAkC;AACrE,SAA+BC,gBAAgB,QAAQ,8BAA2B;AAClF,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,SAASF,OAAOG,aAAa;QAC7BC,WAAWJ,OAAOK,eAAe;QACjCC,SAASN,OAAOO,aAAa;IAC/B;IACA,WAAW;QACTL,SAASF,OAAOQ,cAAc;QAC9BJ,WAAWJ,OAAOS,gBAAgB;QAClCH,SAASN,OAAOU,cAAc;IAChC;IACA,gBAAgB;QACdR,SAASF,OAAOW,kBAAkB;QAClCP,WAAWJ,OAAOY,oBAAoB;QACtCN,SAASN,OAAOa,kBAAkB;IACpC;IACA,cAAc;QACZX,SAASF,OAAOc,gBAAgB;QAChCV,WAAWJ,OAAOe,kBAAkB;QACpCT,SAASN,OAAOgB,gBAAgB;IAClC;IACA,WAAW;QACTd,SAASF,OAAOiB,cAAc;QAC9Bb,WAAWJ,OAAOkB,gBAAgB;QAClCZ,SAASN,OAAOmB,cAAc;IAChC;AACF;AAEA,MAAMC,iBAAiB;IACrBC,GAAGrB,OAAOsB,KAAK;IACfC,GAAGvB,OAAOwB,KAAK;IACfC,GAAGzB,OAAO0B,KAAK;AACjB;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAMT,CAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3C;IAC3B,MAAM4C,uBAAuBL,SAAS,MAAMnC,mBAAmBuC,SAASxC,kBAAkBwC;IAE1F,qBACE,KAACzC;QACC2C,eAAe9C,WACbS,OAAOsC,IAAI,EACXP,SAAS,OAAOD,WAAW9B,OAAO8B,OAAO,EACzCD,SAAS,aAAa7B,OAAOuC,WAAW,EACxCtC,oBAAoB,CAAC2B,WAAW,CAACC,KAAK,EACtCT,cAAc,CAACW,KAAK,EACpBK,sBACAvC,iBAAiBmC;QAEnBQ,kBAAiB;QACjBC,WAAU;QACVC,YAAW;QACV,GAAGR,SAAS;kBAEb,cAAA,KAACpC,oBAAoB6C,QAAQ;YAC3BC,OAAO;gBAAEC,eAAevD,MAAMwD,QAAQ,CAACC,KAAK,CAACd,cAAc;gBAAGF;YAAK;sBAElEE;;;AAIT,EAAE;AAEFN,aAAaqB,QAAQ,GAAGjD;AACxB4B,aAAasB,QAAQ,GAAGlD;AAExB,IAAImD,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC3D,4BAA4BkC,aAAaqB,QAAQ,EAAE;IACnDvD,4BAA4BkC,aAAasB,QAAQ,EAAE;AACrD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка.\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст.\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст.\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения.\n   */\n  maxHeight?: number;\n  /**\n   * Внешний вид карточки.\n   */\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkui.io/components/content-card\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        hasHover={hasHover}\n        hasActive={hasActive}\n        {...restProps}\n        baseClassName={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","baseClassName","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AA2C9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;YACC+B,UAAUA;YACVC,WAAWA;YACV,GAAGE,SAAS;YACbE,eAAe/B,OAAOgC,QAAQ;;gBAE5BnB,CAAAA,OAAOC,MAAK,mBACZ,KAACmB;oBACCC,KAAKvB;oBACLJ,WAAWP,OAAOiC,GAAG;oBACrBpB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWuB,WAAWV;oBAAe;;8BAGlD,MAACW;oBAAI7B,WAAWP,OAAOqC,IAAI;;wBACxB7C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOE,SAAS;4BACnDqC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHvC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOsC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIZ,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOsC,IAAI;sCAAGjC;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}
+{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка.\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст.\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст.\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения.\n   */\n  maxHeight?: number;\n  /**\n   * Внешний вид карточки.\n   */\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkui.io/components/content-card\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        hasHover={hasHover}\n        hasActive={hasActive}\n        {...restProps}\n        baseClassName={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","baseClassName","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AA2C9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;YACC+B,UAAUA;YACVC,WAAWA;YACV,GAAGE,SAAS;YACbE,eAAe/B,OAAOgC,QAAQ;;gBAE5BnB,CAAAA,OAAOC,MAAK,mBACZ,KAACmB;oBACCC,KAAKvB;oBACLJ,WAAWP,OAAOiC,GAAG;oBACrBpB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWuB,WAAWV;oBAAe;;8BAGlD,MAACW;oBAAI7B,WAAWP,OAAOqC,IAAI;;wBACxB7C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOE,SAAS;4BACnDqC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHvC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOsC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIZ,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOsC,IAAI;sCAAGjC;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}