@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

@@ -1,97 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { HTMLProps } from 'react-ui/typings/html';
-import { SizeProp } from '../../lib/types/props';
-import { PolymorphicForwardRefExoticComponent, PolymorphicPropsWithRef } from '../../typings/react-ref';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { ThemeIn } from '../../lib/theming/Theme';
-export declare const CLICKABLE_DEFAULT_ELEMENT = "button";
-export declare type ClickableUse = 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';
-export declare type ClickableSize = SizeProp;
-interface ClickableOwnProps extends CommonProps, Pick<HTMLProps['a'], 'rel' | 'href'>, Pick<HTMLProps['button'], 'type'> {
-    /**
-     * Стиль контрола.
-     *
-     * Возможные значения: `"default"`, `"success"`, `"danger"`, `"grayed"`, `"primary"`, `"pay"`, `"text"`, `"backless"`.
-     */
-    use?: ClickableUse;
-    /**
-     * Определяет как будет выглядеть контрол, не влияет на семантику.
-     */
-    view?: 'button' | 'link';
-    /**
-     * Размер контрола.
-     *
-     * Возможные значения: `"small"`, `"medium"`, `"large"`.
-     */
-    size?: SizeProp;
-    /**
-     * Позвоялет перевести контрол в состояние загрузки.
-     */
-    isLoading?: boolean;
-    /**
-     * Позволяет отключить контрол.
-     */
-    isDisabled?: boolean;
-    /**
-     * Применяет к кнопке стили псеводкласса :active.
-     */
-    isActive?: boolean;
-    /**
-     * Позволяет задать иконку слева от контрола.
-     */
-    leftIcon?: React.ReactNode;
-    /**
-     * Позволяет задать иконку справа от контрола.
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * Объект, в который можно передать переменные темы.
-     * Он будет объединён с темой из контекста.
-     */
-    theme?: ThemeIn;
-    /**
-     * CSS-свойство `width`.
-     */
-    width?: CSSProperties['width'];
-    /**
-     * CSS-свойство `text-align`.
-     */
-    align?: CSSProperties['textAlign'];
-    /**
-     * Состояние валидации при предупреждении.
-     */
-    isWarning?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
-    isError?: boolean;
-    /**
-     * Превращает кнопку в кнопку со стрелкой.
-     */
-    arrow?: 'left' | 'right';
-    /**
-     * Сужает кнопку.
-     */
-    isNarrow?: boolean;
-    /**
-     * Убирает обводку у кнопки.
-     */
-    isBorderless?: boolean;
-    /**
-     * @ignore
-     *
-     * Меняет скругления при использованиии <Clickable> внутри <Group>.
-     */
-    corners?: CSSProperties;
-}
-export declare type ClickableProps<T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT> = PolymorphicPropsWithRef<ClickableOwnProps, T>;
-export declare const ClickableDataTids: {
-    readonly root: "Clickable__root";
-    readonly spinner: "Clickable__spinner";
-};
-/**
- * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
- */
-export declare const Clickable: PolymorphicForwardRefExoticComponent<ClickableOwnProps, typeof CLICKABLE_DEFAULT_ELEMENT>;
-export declare const isClickable: (child: React.ReactNode) => child is React.ReactElement<ClickableOwnProps, string | React.JSXElementConstructor<any>>;
-export {};

package/cjs/components/Clickable/Clickable.js

@@ -1,243 +0,0 @@
-"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, leftIcon: leftIcon, rightIcon: rightIcon },
-  children),
-
-
-  currentView === 'button' && /*#__PURE__*/
-  _react.default.createElement(_ClickableButton.ClickableButton, {
-    leftIcon: leftIcon,
-    rightIcon: rightIcon,
-    isDisabled: isDisabled,
-    isLoading: isLoading,
-    isFocused: isFocused,
-    isWarning: isWarning,
-    isError: isError,
-    arrow: arrow,
-    size: size },
-
-  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

@@ -1 +0,0 @@
-{"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\nexport type ClickableUse = 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';\nexport type ClickableSize = SizeProp;\ninterface ClickableOwnProps\n  extends CommonProps,\n    Pick<HTMLProps['a'], 'rel' | 'href'>,\n    Pick<HTMLProps['button'], 'type'> {\n  /**\n   * Стиль контрола.\n   *\n   * Возможные значения: `\"default\"`, `\"success\"`, `\"danger\"`, `\"grayed\"`, `\"primary\"`, `\"pay\"`, `\"text\"`, `\"backless\"`.\n   */\n  use?: ClickableUse;\n  /**\n   * Определяет как будет выглядеть контрол, не влияет на семантику.\n   */\n  view?: 'button' | 'link';\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 isLoading={isLoading} isFocused={isRootFocused} leftIcon={leftIcon} rightIcon={rightIcon}>\n            {children}\n          </ClickableLink>\n        )}\n        {currentView === 'button' && (\n          <ClickableButton\n            leftIcon={leftIcon}\n            rightIcon={rightIcon}\n            isDisabled={isDisabled}\n            isLoading={isLoading}\n            isFocused={isFocused}\n            isWarning={isWarning}\n            isError={isError}\n            arrow={arrow}\n            size={size}\n          >\n            {children}\n          </ClickableButton>\n        )}\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

@@ -1,172 +0,0 @@
-По умолчанию `<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" 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>
-  </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>
-```
-
-У `<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

@@ -1,11 +0,0 @@
-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

@@ -1,31 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,5 +0,0 @@
-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

@@ -1,43 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"]}