@skbkontur/react-ui 5.0.12-MobilePicker-fix.0 → 5.0.12-fix-imask.2

package/cjs/components/Button/Button.md

@@ -1,3 +1,4 @@
+### Базовый пример
 По умолчанию, кнопка принимает все пропы `HTMLButtonElement`.
 
 ```jsx harmony
@@ -6,6 +7,7 @@ import { Button } from '@skbkontur/react-ui';
 <Button onClick={alert} name="report">Создать отчёт</Button>;
 ```
 
+### Корневой компонент
 Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента.
 
 ```jsx harmony
@@ -14,7 +16,7 @@ import { Button } from '@skbkontur/react-ui';
 <Button component='a' href='https://kontur.ru' target="_blank">Ссылка, но выглядит как кнопка</Button>
 ```
 
-У кнопки есть различные стили.
+### Различные стили
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -51,6 +53,7 @@ const bgStyle = {
 </Gapped>
 ```
 
+### Иконка
 В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
 
 ```jsx harmony
@@ -64,7 +67,7 @@ import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
 </Gapped>
 ```
 
-У кнопки есть 3 стандартных размера.
+### Размер
 
 ```jsx harmony
 <div
@@ -80,11 +83,26 @@ import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
 </div>
 ```
 
-Кнопки могут принимать вид стрелок. В таком случае иконка привязывается к краю кнопки.
+### Ширина
+
+```jsx harmony
+<Button width={40}>Закрыть</Button>
+```
+
+### Состояние валидации
 
 ```jsx harmony
 import { Gapped, Button } from '@skbkontur/react-ui';
+<Gapped gap={5}>
+  <Button warning>Закрыть</Button>
+  <Button error>Закрыть</Button>
+</Gapped>
+```
 
+### Стрелка
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
 
 <Gapped gap={5}>
   <Button arrow="left" size="medium">
@@ -96,12 +114,10 @@ import { Gapped, Button } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-Кнопка в состоянии загрузки.
+### Состояние загрузки
 
 **Поведение:**
-
 Кнопка на время нахождения в состоянии загрузки отключается.
-
 Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
 
 ```jsx harmony
@@ -141,7 +157,7 @@ const handleClick = () => {
 
 ```
 
-Пример кнопки с пропом `theme`.
+### Проп темы
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';
@@ -153,8 +169,7 @@ import { Button, Gapped } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-
-Пример кастомизации кнопки-ссылки.
+### Кастомизация кнопки-ссылки
 
 ```jsx harmony
 import { Toast } from "@skbkontur/react-ui";
@@ -175,7 +190,7 @@ const differentColorStyles = {
 }
 
 const stringify = (styles) => {
-    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
+  return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
 }
 
 const copyStyles = (styles) => {
@@ -193,19 +208,19 @@ const tdStyle = {
   padding: '8px',
 };
 
-const renderExampleRow = (title, styles, index) => {
-    return (
-        <tr>
-          <td style={tdStyle}>{title}</td>
-          <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
-          <td style={tdStyle}>
-            <div style={{display: 'flex'}}>
-              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
-              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
-            </div>
-          </td>
-        </tr>
-    )
+const renderExampleRow = (title, styles) => {
+  return (
+    <tr>
+      <td style={tdStyle}>{title}</td>
+      <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
+      <td style={tdStyle}>
+        <div style={{display: 'flex'}}>
+          <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
+          <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
+        </div>
+      </td>
+    </tr>
+  )
 }
 
 <table style={tableStyle}>
@@ -220,7 +235,7 @@ const renderExampleRow = (title, styles, index) => {
 </table>
 ```
 
-Кнопка может быть узкой.
+### Узкая Кнопка
 
 ```jsx harmony
 import { Button } from '@skbkontur/react-ui';
@@ -230,8 +245,7 @@ import { Button } from '@skbkontur/react-ui';
 </Button>
 ```
 
-
-У кнопки есть состояния валидации.
+### Состояния валидации
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';

package/cjs/components/Button/Button.mixins.d.ts

@@ -1,5 +1,5 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => string;
-export declare const buttonSizeMixinIE11: (paddingX: string, paddingY: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => string;
+export declare const buttonSizeMixinIE11: (paddingX: string, paddingY: string) => string;

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

@@ -1,86 +1,86 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    root: string;
-    arrow: string;
-    caption: string;
-    text: string;
-    innerShadow: string;
-    disabled: string;
-};
-export declare const styles: {
-    root(t: Theme): string;
-    withArrowIconRightSmall(t: Theme): string;
-    withArrowIconRightMedium(t: Theme): string;
-    withArrowIconRightLarge(t: Theme): string;
-    withArrowIconLeftSmall(t: Theme): string;
-    withArrowIconLeftMedium(t: Theme): string;
-    withArrowIconLeftLarge(t: Theme): string;
-    simulatedPress(): string;
-    outline(): string;
-    outlineWarning(t: Theme): string;
-    outlineError(t: Theme): string;
-    outlineLink(): string;
-    outlineLinkWarning(t: Theme): string;
-    outlineLinkError(t: Theme): string;
-    sizeSmall(t: Theme): string;
-    sizeSmallIE11(t: Theme): string;
-    sizeMedium(t: Theme): string;
-    sizeMediumIE11(t: Theme): string;
-    sizeLarge(t: Theme): string;
-    sizeLargeIE11(t: Theme): string;
-    sizeSmallWithIcon(t: Theme): string;
-    sizeMediumWithIcon(t: Theme): string;
-    sizeLargeWithIcon(t: Theme): string;
-    sizeSmallWithIconWithoutText(t: Theme): string;
-    sizeMediumWithIconWithoutText(t: Theme): string;
-    sizeLargeWithIconWithoutText(t: Theme): string;
-    link(t: Theme): string;
-    linkLineHeight(): string;
-    linkLineHeightSafariFallback(): string;
-    linkFocus(t: Theme): string;
-    linkDisabled(t: Theme): string;
-    focus(t: Theme): string;
-    disabled(t: Theme): string;
-    disabledWithoutOutline(t: Theme): string;
-    arrowIconRoot(): string;
-    arrowIconRootSmall(t: Theme): string;
-    arrowIconRootMedium(t: Theme): string;
-    arrowIconRootLarge(t: Theme): string;
-    arrowIconLeft(): string;
-    default(t: Theme): string;
-    primary(t: Theme): string;
-    success(t: Theme): string;
-    danger(t: Theme): string;
-    pay(t: Theme): string;
-    text(t: Theme): string;
-    backless(t: Theme): string;
-    checked(t: Theme): string;
-    checkedFocused(t: Theme): string;
-    checkedDisabled(t: Theme): string;
-    caption(): string;
-    captionLink(): string;
-    captionDisabled(): string;
-    wrap(t: Theme): string;
-    wrapSmall(t: Theme): string;
-    wrapMedium(t: Theme): string;
-    wrapLarge(t: Theme): string;
-    narrow(): string;
-    noPadding(): string;
-    noRightPadding(): string;
-    wrapLink(): string;
-    borderless(): string;
-    backlessDisabled(t: Theme): string;
-    textDisabled(): string;
-    loading(): string;
-    visibilityHidden(): string;
-};
-export declare const activeStyles: {
-    default(t: Theme): string;
-    primary(t: Theme): string;
-    success(t: Theme): string;
-    danger(t: Theme): string;
-    pay(t: Theme): string;
-    link(t: Theme): string;
-    text(t: Theme): string;
-    backless(t: Theme): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    root: string;
+    arrow: string;
+    caption: string;
+    text: string;
+    innerShadow: string;
+    disabled: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    withArrowIconRightSmall(t: Theme): string;
+    withArrowIconRightMedium(t: Theme): string;
+    withArrowIconRightLarge(t: Theme): string;
+    withArrowIconLeftSmall(t: Theme): string;
+    withArrowIconLeftMedium(t: Theme): string;
+    withArrowIconLeftLarge(t: Theme): string;
+    simulatedPress(): string;
+    outline(): string;
+    outlineWarning(t: Theme): string;
+    outlineError(t: Theme): string;
+    outlineLink(): string;
+    outlineLinkWarning(t: Theme): string;
+    outlineLinkError(t: Theme): string;
+    sizeSmall(t: Theme): string;
+    sizeSmallIE11(t: Theme): string;
+    sizeMedium(t: Theme): string;
+    sizeMediumIE11(t: Theme): string;
+    sizeLarge(t: Theme): string;
+    sizeLargeIE11(t: Theme): string;
+    sizeSmallWithIcon(t: Theme): string;
+    sizeMediumWithIcon(t: Theme): string;
+    sizeLargeWithIcon(t: Theme): string;
+    sizeSmallWithIconWithoutText(t: Theme): string;
+    sizeMediumWithIconWithoutText(t: Theme): string;
+    sizeLargeWithIconWithoutText(t: Theme): string;
+    link(t: Theme): string;
+    linkLineHeight(): string;
+    linkLineHeightSafariFallback(): string;
+    linkFocus(t: Theme): string;
+    linkDisabled(t: Theme): string;
+    focus(t: Theme): string;
+    disabled(t: Theme): string;
+    disabledWithoutOutline(t: Theme): string;
+    arrowIconRoot(): string;
+    arrowIconRootSmall(t: Theme): string;
+    arrowIconRootMedium(t: Theme): string;
+    arrowIconRootLarge(t: Theme): string;
+    arrowIconLeft(): string;
+    default(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    pay(t: Theme): string;
+    text(t: Theme): string;
+    backless(t: Theme): string;
+    checked(t: Theme): string;
+    checkedFocused(t: Theme): string;
+    checkedDisabled(t: Theme): string;
+    caption(): string;
+    captionLink(): string;
+    captionDisabled(): string;
+    wrap(t: Theme): string;
+    wrapSmall(t: Theme): string;
+    wrapMedium(t: Theme): string;
+    wrapLarge(t: Theme): string;
+    narrow(): string;
+    noPadding(): string;
+    noRightPadding(): string;
+    wrapLink(): string;
+    borderless(): string;
+    backlessDisabled(t: Theme): string;
+    textDisabled(): string;
+    loading(): string;
+    visibilityHidden(): string;
+};
+export declare const activeStyles: {
+    default(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    pay(t: Theme): string;
+    link(t: Theme): string;
+    text(t: Theme): string;
+    backless(t: Theme): string;
+};

package/cjs/components/Button/ButtonArrow.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-import { ButtonInnerProps } from './Button';
-type ButtonArrowProps = Pick<ButtonInnerProps, 'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning'> & {
-    isFocused: boolean;
-};
-export declare function useButtonArrow(props: ButtonArrowProps, theme: Theme): [string, React.ReactNode];
-export {};
+import React from 'react';
+import { Theme } from '../../lib/theming/Theme';
+import { ButtonInnerProps } from './Button';
+type ButtonArrowProps = Pick<ButtonInnerProps, 'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning'> & {
+    isFocused: boolean;
+};
+export declare function useButtonArrow(props: ButtonArrowProps, theme: Theme): [string, React.ReactNode];
+export {};

package/cjs/components/Button/ButtonIcon.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-import { SizeProp } from '../../lib/types/props';
-import { ButtonInnerProps } from './Button';
-export interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {
-    position: 'right' | 'left';
-    hasChildren: boolean;
-    hasBothIcons?: boolean;
-}
-export declare const getButtonIconSizes: (theme: Theme) => Record<SizeProp, number>;
-export declare const ButtonIcon: React.FunctionComponent<ButtonIconProps>;
+import React from 'react';
+import { Theme } from '../../lib/theming/Theme';
+import { SizeProp } from '../../lib/types/props';
+import { ButtonInnerProps } from './Button';
+export interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {
+    position: 'right' | 'left';
+    hasChildren: boolean;
+    hasBothIcons?: boolean;
+}
+export declare const getButtonIconSizes: (theme: Theme) => Record<SizeProp, number>;
+export declare const ButtonIcon: React.FunctionComponent<ButtonIconProps>;

package/cjs/components/Button/ButtonIcon.styles.d.ts

@@ -1,16 +1,16 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    icon(): string;
-    iconSmall(t: Theme): string;
-    iconSmallLeft(t: Theme): string;
-    iconSmallRight(t: Theme): string;
-    iconMedium(t: Theme): string;
-    iconMediumLeft(t: Theme): string;
-    iconMediumRight(t: Theme): string;
-    iconLarge(t: Theme): string;
-    iconLargeLeft(t: Theme): string;
-    iconLargeRight(t: Theme): string;
-    iconLeftLink(t: Theme): string;
-    iconRightLink(t: Theme): string;
-    iconNoMargin(): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconSmallLeft(t: Theme): string;
+    iconSmallRight(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconMediumLeft(t: Theme): string;
+    iconMediumRight(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconLargeLeft(t: Theme): string;
+    iconLargeRight(t: Theme): string;
+    iconLeftLink(t: Theme): string;
+    iconRightLink(t: Theme): string;
+    iconNoMargin(): string;
+};

package/cjs/components/Button/LoadingButtonIcon.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { IconSizeAliases } from '../../internal/icons2022/iconConstants';
-interface LoadingButtonIconProps {
-    size: IconSizeAliases;
-    isCentered?: boolean;
-}
-export declare const LoadingButtonIcon: ({ size, isCentered }: LoadingButtonIconProps) => React.JSX.Element;
-export {};
+import React from 'react';
+import { IconSizeAliases } from '../../internal/icons2022/iconConstants';
+interface LoadingButtonIconProps {
+    size: IconSizeAliases;
+    isCentered?: boolean;
+}
+export declare const LoadingButtonIcon: ({ size, isCentered }: LoadingButtonIconProps) => React.JSX.Element;
+export {};

package/cjs/components/Button/__docs__/Button.mdx

@@ -0,0 +1,28 @@
+import * as ButtonStories from './Button.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/button)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=200%3A2498)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Button/getInnerLinkTheme.d.ts

@@ -1,2 +1,2 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const getInnerLinkTheme: (theme: Theme) => Theme;
+import { Theme } from '../../lib/theming/Theme';
+export declare const getInnerLinkTheme: (theme: Theme) => Theme;

package/cjs/components/Button/index.d.ts

@@ -1 +1 @@
-export * from './Button';
+export * from './Button';