@skbkontur/react-ui 0.0.0-52df310f7c → 0.0.0-53ccdcbfcc

package/cjs/components/Clickable/Clickable.js

@@ -0,0 +1,248 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isClickable = exports.ClickableDataTids = exports.Clickable = exports.CLICKABLE_DEFAULT_ELEMENT = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _globalObject = require("@skbkontur/global-object");
+
+
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+
+
+
+
+var _utils = require("../../lib/utils");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+
+var _Clickable = require("./Clickable.styles");
+var _utils2 = require("./utils");
+var _ClickableLink = require("./ClickableLink");
+var _ClickableButton = require("./ClickableButton");
+var _ClickableButtonWrapper = require("./ClickableButtonWrapper");
+var _ClickableButton2 = require("./ClickableButton.styles");
+var _ClickableLink2 = require("./ClickableLink.styles");var _excluded = ["size", "use", "type", "as", "arrow", "corners", "rel", "theme", "href", "isNarrow", "view", "leftIcon", "rightIcon", "onClick", "onFocus", "onBlur", "isLoading", "isDisabled", "isActive", "isBorderless", "width", "isWarning", "isError", "align", "style", "className", "children"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+var CLICKABLE_DEFAULT_ELEMENT = 'button';exports.CLICKABLE_DEFAULT_ELEMENT = CLICKABLE_DEFAULT_ELEMENT;
+var COMPONENT_NAME = 'Clickable';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var ClickableDataTids = {
+  root: 'Clickable__root',
+  spinner: 'Clickable__spinner' };
+
+
+/**
+ * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
+ */exports.ClickableDataTids = ClickableDataTids;
+var Clickable =
+(0, _forwardRefAndName.forwardRefAndName)(COMPONENT_NAME, function Clickable(_ref,
+
+ref) {var _ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,_ref$use = _ref.use,use = _ref$use === void 0 ? 'default' : _ref$use,_ref$type = _ref.type,type = _ref$type === void 0 ? 'button' : _ref$type,as = _ref.as,arrow = _ref.arrow,corners = _ref.corners,rel = _ref.rel,userTheme = _ref.theme,href = _ref.href,isNarrow = _ref.isNarrow,view = _ref.view,leftIcon = _ref.leftIcon,rightIcon = _ref.rightIcon,onClick = _ref.onClick,onFocus = _ref.onFocus,onBlur = _ref.onBlur,isLoading = _ref.isLoading,isDisabled = _ref.isDisabled,isActive = _ref.isActive,isBorderless = _ref.isBorderless,width = _ref.width,isWarning = _ref.isWarning,isError = _ref.isError,align = _ref.align,style = _ref.style,className = _ref.className,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var Root = as != null ? as : CLICKABLE_DEFAULT_ELEMENT;
+
+  var contextTheme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var theme = userTheme ? _ThemeFactory.ThemeFactory.create(userTheme, contextTheme) : contextTheme;
+
+  var buttonSize = (0, _ClickableButton2.getButtonSize)({ size: size, leftIcon: leftIcon, rightIcon: rightIcon, children: children, theme: theme });
+  var currentView = (0, _utils2.getCurrentView)(view, as);
+
+  var isNotInteractive = !!isLoading || !!isDisabled;
+
+  var _useState = (0, _react.useState)(false),isFocused = _useState[0],setIsFocused = _useState[1];
+  var isRootFocused = isFocused && !isNotInteractive;
+  var handleFocus = (0, _react.useCallback)(
+  function (e) {
+    if (!isNotInteractive) {
+      // focus event fires before keyDown eventlistener
+      // so we should check tabPressed in async way
+      _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed) {
+          setIsFocused(true);
+        }
+      });
+    }
+    onFocus == null ? void 0 : onFocus(e);
+  },
+  [isNotInteractive]);
+
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    setIsFocused(false);
+    if (!isNotInteractive) {
+      onBlur == null ? void 0 : onBlur(e);
+    }
+  }, []);
+
+  var handleClick = (0, _react.useCallback)(
+  function (e) {
+    if (onClick && !isNotInteractive) {
+      onClick(e);
+    }
+  },
+  [onClick, isNotInteractive]);
+
+
+  var content = /*#__PURE__*/
+  _react.default.createElement(Root
+  // the `key` prop needed so React can understand that we are working with the same content
+  // regardless of whether the wrapper presented or not
+  , (0, _extends2.default)({ key: ClickableDataTids.root,
+    className: (0, _Emotion.cx)(
+    _Clickable.generalStyles.root(theme),
+    currentView === 'link' && (0, _ClickableLink2.getLinkStyles)({ use: use, isFocused: isFocused, isNotInteractive: isNotInteractive, theme: theme }),
+    currentView === 'button' &&
+    (0, _ClickableButton2.getButtonStyles)({
+      use: use,
+      buttonSize: buttonSize,
+      theme: theme,
+      arrow: arrow,
+      size: size,
+      isNarrow: isNarrow,
+      isBorderless: isBorderless,
+      isFocused: isFocused,
+      isActive: isActive,
+      isNotInteractive: isNotInteractive }),
+
+    className),
+
+    type: Root === 'button' ? type : undefined,
+    rel: (0, _utils2.getRel)(rel, href),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    style: (0, _extends2.default)({ textAlign: align }, corners, style),
+    "data-tid": ClickableDataTids.root,
+    "aria-disabled": isNotInteractive,
+    href: href,
+    ref: ref },
+  rest),
+
+  currentView === 'link' && /*#__PURE__*/
+  _react.default.createElement(_ClickableLink.ClickableLink, {
+    isLoading: isLoading,
+    isFocused: isRootFocused,
+    isError: isError,
+    leftIcon: leftIcon,
+    rightIcon: rightIcon },
+
+  children),
+
+
+  currentView === 'button' && /*#__PURE__*/
+  _react.default.createElement(_ClickableButton.ClickableButton, {
+    leftIcon: leftIcon,
+    rightIcon: rightIcon,
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    isFocused: isRootFocused,
+    isWarning: isWarning,
+    isError: isError,
+    arrow: arrow,
+    size: size },
+
+  children),
+
+
+  currentView === 'custom' && children);
+
+
+
+  if (currentView === 'button') {
+    return /*#__PURE__*/(
+      _react.default.createElement(_ClickableButtonWrapper.ClickableButtonWrapper, { width: width, size: size },
+      content));
+
+
+  }
+
+  return content;
+});exports.Clickable = Clickable;
+
+var isClickable = (0, _utils.isReactUIComponent)(COMPONENT_NAME);exports.isClickable = isClickable;

package/cjs/components/Clickable/Clickable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Clickable.tsx"],"names":["CLICKABLE_DEFAULT_ELEMENT","COMPONENT_NAME","ClickableDataTids","root","spinner","Clickable","ref","size","use","type","as","arrow","corners","rel","userTheme","theme","href","isNarrow","view","leftIcon","rightIcon","onClick","onFocus","onBlur","isLoading","isDisabled","isActive","isBorderless","width","isWarning","isError","align","style","className","children","rest","Root","contextTheme","ThemeContext","ThemeFactory","create","buttonSize","currentView","isNotInteractive","isFocused","setIsFocused","isRootFocused","handleFocus","e","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","handleClick","content","generalStyles","undefined","textAlign","isClickable"],"mappings":"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","sourcesContent":["import React, { CSSProperties, useCallback, useContext, useState } from 'react';\nimport { HTMLProps } from 'react-ui/typings/html';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { SizeProp } from '../../lib/types/props';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport {\n  PolymorphicForwardRefExoticComponent,\n  PolymorphicPropsWithoutRef,\n  PolymorphicPropsWithRef,\n} from '../../typings/react-ref';\nimport { isReactUIComponent } from '../../lib/utils';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeIn } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { generalStyles } from './Clickable.styles';\nimport { getCurrentView, getRel } from './utils';\nimport { ClickableLink } from './ClickableLink';\nimport { ClickableButton } from './ClickableButton';\nimport { ClickableButtonWrapper } from './ClickableButtonWrapper';\nimport { getButtonSize, getButtonStyles } from './ClickableButton.styles';\nimport { getLinkStyles } from './ClickableLink.styles';\n\nexport const CLICKABLE_DEFAULT_ELEMENT = 'button';\nconst COMPONENT_NAME = 'Clickable';\n\ninterface ClickableOwnProps\n  extends CommonProps,\n    Partial<Pick<HTMLProps['a'], 'rel' | 'href'>>,\n    Partial<Pick<HTMLProps['button'], 'type'>> {\n  /**\n   * Стиль контрола.\n   *\n   * Возможные значения: `\"default\"`, `\"success\"`, `\"danger\"`, `\"grayed\"`, `\"primary\"`, `\"pay\"`, `\"text\"`, `\"backless\"`.\n   */\n  use?: 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';\n  /**\n   * Определяет как будет выглядеть контрол, не влияет на семантику.\n   */\n  view?: 'button' | 'link' | 'custom';\n  /**\n   * Размер контрола.\n   *\n   * Возможные значения: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n  /**\n   * Позвоялет перевести контрол в состояние загрузки.\n   */\n  isLoading?: boolean;\n  /**\n   * Позволяет отключить контрол.\n   */\n  isDisabled?: boolean;\n  /**\n   * Применяет к кнопке стили псеводкласса :active.\n   */\n  isActive?: boolean;\n  /**\n   * Позволяет задать иконку слева от контрола.\n   */\n  leftIcon?: React.ReactNode;\n  /**\n   * Позволяет задать иконку справа от контрола.\n   */\n  rightIcon?: React.ReactNode;\n  /**\n   * Объект, в который можно передать переменные темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: CSSProperties['width'];\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: CSSProperties['textAlign'];\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  isWarning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  isError?: boolean;\n  /**\n   * Превращает кнопку в кнопку со стрелкой.\n   */\n  arrow?: 'left' | 'right';\n  /**\n   * Сужает кнопку.\n   */\n  isNarrow?: boolean;\n  /**\n   * Убирает обводку у кнопки.\n   */\n  isBorderless?: boolean;\n  /**\n   * @ignore\n   *\n   * Меняет скругления при использованиии <Clickable> внутри <Group>.\n   */\n  corners?: CSSProperties;\n}\n\nexport type ClickableProps<T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT> = PolymorphicPropsWithRef<\n  ClickableOwnProps,\n  T\n>;\n\nexport const ClickableDataTids = {\n  root: 'Clickable__root',\n  spinner: 'Clickable__spinner',\n} as const;\n\n/**\n * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.\n */\nexport const Clickable: PolymorphicForwardRefExoticComponent<ClickableOwnProps, typeof CLICKABLE_DEFAULT_ELEMENT> =\n  forwardRefAndName(COMPONENT_NAME, function Clickable<\n    T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT,\n  >({ size = 'small', use = 'default', type = 'button', as, arrow, corners, rel, theme: userTheme, href, isNarrow, view, leftIcon, rightIcon, onClick, onFocus, onBlur, isLoading, isDisabled, isActive, isBorderless, width, isWarning, isError, align, style, className, children, ...rest }: PolymorphicPropsWithoutRef<ClickableOwnProps, T>, ref: React.ForwardedRef<Element>) {\n    const Root: React.ElementType = as ?? CLICKABLE_DEFAULT_ELEMENT;\n\n    const contextTheme = useContext(ThemeContext);\n    const theme = userTheme ? ThemeFactory.create(userTheme, contextTheme) : contextTheme;\n\n    const buttonSize = getButtonSize({ size, leftIcon, rightIcon, children, theme });\n    const currentView = getCurrentView(view, as);\n\n    const isNotInteractive = !!isLoading || !!isDisabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const isRootFocused = isFocused && !isNotInteractive;\n    const handleFocus = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isNotInteractive) {\n          // focus event fires before keyDown eventlistener\n          // so we should check tabPressed in async way\n          globalObject.requestAnimationFrame?.(() => {\n            if (keyListener.isTabPressed) {\n              setIsFocused(true);\n            }\n          });\n        }\n        onFocus?.(e);\n      },\n      [isNotInteractive],\n    );\n    const handleBlur = useCallback((e: React.FocusEvent) => {\n      setIsFocused(false);\n      if (!isNotInteractive) {\n        onBlur?.(e);\n      }\n    }, []);\n\n    const handleClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (onClick && !isNotInteractive) {\n          onClick(e);\n        }\n      },\n      [onClick, isNotInteractive],\n    );\n\n    const content = (\n      <Root\n        // the `key` prop needed so React can understand that we are working with the same content\n        // regardless of whether the wrapper presented or not\n        key={ClickableDataTids.root}\n        className={cx(\n          generalStyles.root(theme),\n          currentView === 'link' && getLinkStyles({ use, isFocused, isNotInteractive, theme }),\n          currentView === 'button' &&\n            getButtonStyles({\n              use,\n              buttonSize,\n              theme,\n              arrow,\n              size,\n              isNarrow,\n              isBorderless,\n              isFocused,\n              isActive,\n              isNotInteractive,\n            }),\n          className,\n        )}\n        type={Root === 'button' ? type : undefined}\n        rel={getRel(rel, href)}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        style={{ textAlign: align, ...corners, ...style }}\n        data-tid={ClickableDataTids.root}\n        aria-disabled={isNotInteractive}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {currentView === 'link' && (\n          <ClickableLink\n            isLoading={isLoading}\n            isFocused={isRootFocused}\n            isError={isError}\n            leftIcon={leftIcon}\n            rightIcon={rightIcon}\n          >\n            {children}\n          </ClickableLink>\n        )}\n        {currentView === 'button' && (\n          <ClickableButton\n            leftIcon={leftIcon}\n            rightIcon={rightIcon}\n            isDisabled={isDisabled}\n            isLoading={isLoading}\n            isFocused={isRootFocused}\n            isWarning={isWarning}\n            isError={isError}\n            arrow={arrow}\n            size={size}\n          >\n            {children}\n          </ClickableButton>\n        )}\n        {currentView === 'custom' && children}\n      </Root>\n    );\n\n    if (currentView === 'button') {\n      return (\n        <ClickableButtonWrapper width={width} size={size}>\n          {content}\n        </ClickableButtonWrapper>\n      );\n    }\n\n    return content;\n  });\n\nexport const isClickable = isReactUIComponent<ClickableOwnProps>(COMPONENT_NAME);\n"]}

package/cjs/components/Clickable/Clickable.md

@@ -0,0 +1,210 @@
+По умолчанию `<Clickable>` рендерится в виде кнопки с тегом `<button>`.
+
+<br/>
+<br/>
+
+Это можно изменить при помощи пропов `as` и `view`:
+
+— `as ('button' | 'a')` — изменяет корневой тег, а также при отсутствии `view` задаёт внешний вид;
+
+— `view ('button' | 'link')` — изменяет внешний вид контрола.
+```jsx harmony
+import { Gapped, Clickable, clickableStyles } from '@skbkontur/react-ui';
+import { XIcon } from '@skbkontur/icons/icons/XIcon';
+
+const bgStyle = {
+  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
+  backgroundSize: `16px 16px`,
+  backgroundPosition: `-8px -8px`,
+  padding: 16
+};
+
+<>
+  <p>Ссылки</p>
+  <Gapped gap={15}>
+    <Clickable as="a" href="/">Default</Clickable>
+    <Clickable as="a" use="success" href="/">Success</Clickable>
+    <Clickable as="a" use="danger" href="/">Danger</Clickable>
+    <Clickable as="a" use="grayed" href="/">Grayed</Clickable>
+    <Clickable as="a" isError href="/">Error</Clickable>
+    <Clickable as="a" isDisabled href="/">Disabled</Clickable>
+  </Gapped>
+
+  <p>Кнопки</p>
+  <Gapped vertical>
+    <Gapped>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+    <Gapped style={bgStyle}>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+  </Gapped>
+
+  <p>Гибриды</p>
+  <Gapped>
+    <Clickable as="a" view="button" href="/" >Ссылка, но выглядит как кнопка</Clickable>
+    <Clickable as="button" view="link">Кнопка, но выглядит как ссылка</Clickable>
+    <Clickable
+      as="button"
+      view="custom"
+    >
+      <div
+        style={{
+          background: '#3498db',
+          color: 'white',
+          padding: '10px 7.5px',
+          borderRadius: '5px'
+        }}
+      >Кастомный элемент с тегом кнопки и базовыми возможностями Clickable</div>
+    </Clickable>
+  </Gapped>
+</>
+```
+
+Вы можете использовать любой тег в качестве основы для `<Clickable>` (с помощью `as`), но в таком случае вам придётся самостоятельно реализовывать доступность контрола. Поэтому мы рекомендуем использовать только `a` и `button`, если у вас нет весомой причины для использования другого тега.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="div" view="button">
+    Это div, но он выглядит как кнопка
+  </Clickable>
+  <Clickable as="div" view="link">
+    Это span, но он выглядит как ссылка
+  </Clickable>
+</Gapped>
+```
+
+В чём польза от кастомного вида (`view="custom"`) по сравнению с оборачиванием в нативную кнопку или ссылку?
+
+Мы уже сбросили все мещающие стили, сделали компонент доступным для пользователей с ограниченными возможностями, а также позаботились о таких приятных мелочах как: корректная обработка отключенного состояния, `data-tid` на корне и обработка `rel` на основе значения из `href`.
+```jsx harmony
+<Clickable
+  style={{
+    display: 'inline-block',
+    align: 'center',
+    background: '#151515',
+    color: 'white',
+    boxShadow: '-12px 12px 0 0 #ED6742',
+    padding: '20px 10px',
+    borderRadius: '15px',
+    margin: '30px',
+  }}
+  as="a"
+  href="https://kontur.ru/"
+  view="custom"
+  >
+  <div style={{ fontSize: '20px' }}>Контур</div>
+  <div style={{ fontSize: '25px', fontWeight: '500' }}>Экосистема для бизнеса</div>
+</Clickable>
+```
+
+У `<Clickable>` могут быть иконки сразу с обеих сторон, наличие/отсутствие иконок также влияет на отображение в состоянии загрузки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
+
+const [isLoading, setIsLoading] = React.useState(false);
+
+<Gapped gap={20} vertical>
+  <Clickable use={isLoading ? 'danger' : 'success'} onClick={() => setIsLoading(!isLoading)}>
+    {isLoading ? 'Остановить загрузку!!!' : 'Начать загрузку!'}
+  </Clickable>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/">
+      Без иконки
+    </Clickable>
+  </Gapped>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading}>
+      Без иконки
+    </Clickable>
+  </Gapped>
+</Gapped>
+```
+
+`<Clickable>` в виде кнопки может быть в одном из трёх размеров: `small`, `medium` или `large`.
+```jsx harmony
+<div style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Clickable size="small">Маленькая</Clickable>
+  <Clickable size="medium">Средняя</Clickable>
+  <Clickable size="large">Большая</Clickable>
+</div>
+```
+
+`Clickable` в виде кнопки может превращаться в кнопки-ссылки, размер стрелок меняется в зависимости от размера кнопки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable arrow="left">Стрелка влево</Clickable>
+  <Clickable arrow="right">Стрелка вправо</Clickable>
+</Gapped>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `<Clickable>` передана ссылка, ведущая на внешний ресурс, то `<Clickable>` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="a" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Clickable>
+  <Clickable as="a" target="_blank" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Clickable>
+</Gapped>
+```

package/cjs/components/Clickable/Clickable.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+export interface GetStylesBase extends Pick<ClickableProps, 'use'> {
+    theme: Theme;
+}
+export declare const clickableGlobalClasses: {
+    text: string;
+};
+export declare const generalStyles: {
+    root(t: Theme): string;
+};

package/cjs/components/Clickable/Clickable.styles.js

@@ -0,0 +1,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.generalStyles = exports.clickableGlobalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+
+
+
+
+
+
+var clickableGlobalClasses = (0, _Emotion.prefix)('clickable')({
+  text: 'text' });exports.clickableGlobalClasses = clickableGlobalClasses;
+
+
+var generalStyles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ", ";\n      }\n    "])),
+
+
+
+
+
+
+
+
+
+
+
+    t.borderColorFocus);
+
+
+  } });exports.generalStyles = generalStyles;

package/cjs/components/Clickable/Clickable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Clickable.styles.ts"],"names":["clickableGlobalClasses","text","generalStyles","root","t","css","borderColorFocus"],"mappings":";AACA,oD;;;;;;;;AAQO,IAAMA,sBAAsB,GAAG,qBAAO,WAAP,EAAoB;AACxDC,EAAAA,IAAI,EAAE,MADkD,EAApB,CAA/B,C;;;AAIA,IAAMC,aAAa,GAAG,2BAAa;AACxCC,EAAAA,IADwC,gBACnCC,CADmC,EACzB;AACb,eAAOC,YAAP;;;;;;;;;;;;AAYkCD,IAAAA,CAAC,CAACE,gBAZpC;;;AAeD,GAjBuC,EAAb,CAAtB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\n\nexport interface GetStylesBase extends Pick<ClickableProps, 'use'> {\n  theme: Theme;\n}\n\nexport const clickableGlobalClasses = prefix('clickable')({\n  text: 'text',\n});\n\nexport const generalStyles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ${t.borderColorFocus};\n      }\n    `;\n  },\n});\n"]}

package/cjs/components/Clickable/ClickableButton.d.ts

@@ -0,0 +1,5 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableButtonProps extends Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isDisabled' | 'isLoading' | 'size' | 'arrow' | 'children' | 'isWarning' | 'isError'> {
+    isFocused?: boolean;
+}
+export declare const ClickableButton: ({ leftIcon, rightIcon, isDisabled, isLoading, isFocused, size, isWarning, isError, arrow, children, }: ClickableButtonProps) => JSX.Element;

package/cjs/components/Clickable/ClickableButton.js

@@ -0,0 +1,43 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ClickableButton = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _ClickableButtonArrow = require("./ClickableButtonArrow");
+var _ClickableButtonCaption = require("./ClickableButtonCaption");
+var _ClickableButtonOutline = require("./ClickableButtonOutline");
+
+
+
+
+
+
+
+
+
+var ClickableButton = function ClickableButton(_ref)
+
+
+
+
+
+
+
+
+
+
+{var leftIcon = _ref.leftIcon,rightIcon = _ref.rightIcon,isDisabled = _ref.isDisabled,isLoading = _ref.isLoading,isFocused = _ref.isFocused,size = _ref.size,isWarning = _ref.isWarning,isError = _ref.isError,arrow = _ref.arrow,children = _ref.children;
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonOutline.ClickableButtonOutline, { isFocused: isFocused, isDisabled: isDisabled, isWarning: isWarning, isError: isError }),
+    arrow && /*#__PURE__*/_react.default.createElement(_ClickableButtonArrow.ClickableButtonArrow, { arrow: arrow, size: size }), /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonCaption.ClickableButtonCaption, {
+      leftIcon: leftIcon,
+      rightIcon: rightIcon,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      size: size },
+
+    children)));
+
+
+
+};exports.ClickableButton = ClickableButton;

package/cjs/components/Clickable/ClickableButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.tsx"],"names":["ClickableButton","leftIcon","rightIcon","isDisabled","isLoading","isFocused","size","isWarning","isError","arrow","children"],"mappings":"6JAAA;;;AAGA;AACA;AACA;;;;;;;;;;AAUO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB;;;;;;;;;;;AAWH,KAV1BC,QAU0B,QAV1BA,QAU0B,CAT1BC,SAS0B,QAT1BA,SAS0B,CAR1BC,UAQ0B,QAR1BA,UAQ0B,CAP1BC,SAO0B,QAP1BA,SAO0B,CAN1BC,SAM0B,QAN1BA,SAM0B,CAL1BC,IAK0B,QAL1BA,IAK0B,CAJ1BC,SAI0B,QAJ1BA,SAI0B,CAH1BC,OAG0B,QAH1BA,OAG0B,CAF1BC,KAE0B,QAF1BA,KAE0B,CAD1BC,QAC0B,QAD1BA,QAC0B;AAC1B;AACE;AACE,iCAAC,8CAAD,IAAwB,SAAS,EAAEL,SAAnC,EAA8C,UAAU,EAAEF,UAA1D,EAAsE,SAAS,EAAEI,SAAjF,EAA4F,OAAO,EAAEC,OAArG,GADF;AAEGC,IAAAA,KAAK,iBAAI,6BAAC,0CAAD,IAAsB,KAAK,EAAEA,KAA7B,EAAoC,IAAI,EAAEH,IAA1C,GAFZ;AAGE,iCAAC,8CAAD;AACE,MAAA,QAAQ,EAAEL,QADZ;AAEE,MAAA,SAAS,EAAEC,SAFb;AAGE,MAAA,UAAU,EAAEC,UAHd;AAIE,MAAA,SAAS,EAAEC,SAJb;AAKE,MAAA,IAAI,EAAEE,IALR;;AAOGI,IAAAA,QAPH,CAHF,CADF;;;;AAeD,CA3BM,C","sourcesContent":["import React from 'react';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonArrow } from './ClickableButtonArrow';\nimport { ClickableButtonCaption } from './ClickableButtonCaption';\nimport { ClickableButtonOutline } from './ClickableButtonOutline';\n\nexport interface ClickableButtonProps\n  extends Pick<\n    ClickableProps,\n    'leftIcon' | 'rightIcon' | 'isDisabled' | 'isLoading' | 'size' | 'arrow' | 'children' | 'isWarning' | 'isError'\n  > {\n  isFocused?: boolean;\n}\n\nexport const ClickableButton = ({\n  leftIcon,\n  rightIcon,\n  isDisabled,\n  isLoading,\n  isFocused,\n  size,\n  isWarning,\n  isError,\n  arrow,\n  children,\n}: ClickableButtonProps) => {\n  return (\n    <>\n      <ClickableButtonOutline isFocused={isFocused} isDisabled={isDisabled} isWarning={isWarning} isError={isError} />\n      {arrow && <ClickableButtonArrow arrow={arrow} size={size} />}\n      <ClickableButtonCaption\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        size={size}\n      >\n        {children}\n      </ClickableButtonCaption>\n    </>\n  );\n};\n"]}

package/cjs/components/Clickable/ClickableButton.mixins.d.ts

@@ -0,0 +1,30 @@
+export declare const buttonUseMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth, }: {
+    btnBackground: string;
+    btnBackgroundStart?: string | undefined;
+    btnBackgroundEnd?: string | undefined;
+    color: string;
+    borderColor: string;
+    borderBottomColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonHoverMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth, }: {
+    btnBackground: string;
+    btnBackgroundStart?: string | undefined;
+    btnBackgroundEnd?: string | undefined;
+    borderColor: string;
+    borderBottomColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonActiveMixin: ({ btnBackground, borderColor, borderTopColor, borderWidth, }: {
+    btnBackground: string;
+    borderColor: string;
+    borderTopColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonSizeMixin: ({ fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation, }: {
+    fontSize: string;
+    lineHeight: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamilyCompensation: string;
+}) => string;