@alfalab/core-components-number-input 1.2.4 → 1.2.5

package/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

package/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/Component.mobile-ebda875c.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFormControlProps } from "./index-ebda875c";
-type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
-declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
-export { FormControlMobileProps, FormControlMobile };
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-d7e9f69d";
+export { InputMobileProps, InputMobile };

package/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/components/number-input/Component.d.ts

@@ -39,7 +39,7 @@ type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
         valueString: string;
     }) => void;
 };
-declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange" | "value" | "type"> & {
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "onChange" | "type"> & {
     /**
      * Значение поля ввода
      */

package/cssm/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/cssm/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

package/cssm/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/cssm/Component.mobile-ebda875c.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFormControlProps } from "./index-ebda875c";
-type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
-declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
-export { FormControlMobileProps, FormControlMobile };
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-d7e9f69d";
+export { InputMobileProps, InputMobile };

package/cssm/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/cssm/components/number-input/Component.d.ts

@@ -39,7 +39,7 @@ type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
         valueString: string;
     }) => void;
 };
-declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange" | "value" | "type"> & {
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "onChange" | "type"> & {
     /**
      * Значение поля ввода
      */

package/cssm/index-3109f463.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+type MqProps = {
+    /**
+     * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+     */
+    query?: string;
+    /**
+     * Запрос на поддержку тач-событий
+     */
+    touch?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Обработчик изменений в совпадении запросов
+     */
+    onMatchChange?: (isMatched: boolean) => void;
+};
+declare const Mq: FC<MqProps>;
+/**
+ * Хук для медиа запросов.
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
+ */
+declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
+/**
+ * Возвращает MediaQueryList для заданного media-выражения.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function getMatchMedia(queryProp: string): MediaQueryList;
+/**
+ * Удаляет MediaQueryList.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function releaseMatchMedia(queryProp: string): void;
+/**
+ * Возвращает `true`, если есть поддержка `Pointer Events`
+ */
+declare function isPointerEventsSupported(): boolean;
+/**
+ * Возвращает `true`, если есть поддержка `Touch Events`
+ */
+declare function isTouchSupported(): boolean;
+declare const _exports: {
+    "--mobile-xs": string;
+    "--mobile-s": string;
+    "--mobile-m": string;
+    "--mobile-l": string;
+    "--mobile": string;
+    "--tablet-s": string;
+    "--tablet-m": string;
+    "--tablet": string;
+    "--desktop-s": string;
+    "--desktop-m": string;
+    "--desktop-l": string;
+    "--desktop-xl": string;
+    "--desktop": string;
+};
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/cssm/index-72308007.d.ts

@@ -3,9 +3,9 @@ import React from "react";
 import { PaddingType } from "./index-72dda473";
 /* eslint-disable no-plusplus, no-param-reassign */
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
-declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare const isClient: () => boolean;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
@@ -51,4 +51,4 @@ declare const maskUtils: {
     prefixPostprocessor: typeof prefixPostprocessor;
     caretGuard: typeof caretGuard;
 };
-export { createPaddingStyle, isClient, getDataTestId, easingFns, inputUtils, fnUtils, maskUtils };
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils, maskUtils };

package/cssm/index-ebda875c.d.ts

@@ -86,6 +86,14 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Дополнительный класс для аддонов
      */
     addonsClassName?: string;
+    /**
+     * Свойства для обертки левых аддонов
+     */
+    leftAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Свойства для обертки правых аддонов
+     */
+    rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -125,6 +133,8 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
     inputWrapperClassName?: string | undefined;
     labelClassName?: string | undefined;
     addonsClassName?: string | undefined;
+    leftAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     dataTestId?: string | undefined;
     children?: ReactNode;
     styles: {

package/esm/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/esm/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

package/esm/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/esm/Component.mobile-ebda875c.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFormControlProps } from "./index-ebda875c";
-type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
-declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
-export { FormControlMobileProps, FormControlMobile };
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-d7e9f69d";
+export { InputMobileProps, InputMobile };

package/esm/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/esm/components/number-input/Component.d.ts

@@ -39,7 +39,7 @@ type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
         valueString: string;
     }) => void;
 };
-declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange" | "value" | "type"> & {
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "onChange" | "type"> & {
     /**
      * Значение поля ввода
      */

package/esm/index-3109f463.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+type MqProps = {
+    /**
+     * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+     */
+    query?: string;
+    /**
+     * Запрос на поддержку тач-событий
+     */
+    touch?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Обработчик изменений в совпадении запросов
+     */
+    onMatchChange?: (isMatched: boolean) => void;
+};
+declare const Mq: FC<MqProps>;
+/**
+ * Хук для медиа запросов.
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
+ */
+declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
+/**
+ * Возвращает MediaQueryList для заданного media-выражения.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function getMatchMedia(queryProp: string): MediaQueryList;
+/**
+ * Удаляет MediaQueryList.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function releaseMatchMedia(queryProp: string): void;
+/**
+ * Возвращает `true`, если есть поддержка `Pointer Events`
+ */
+declare function isPointerEventsSupported(): boolean;
+/**
+ * Возвращает `true`, если есть поддержка `Touch Events`
+ */
+declare function isTouchSupported(): boolean;
+declare const _exports: {
+    "--mobile-xs": string;
+    "--mobile-s": string;
+    "--mobile-m": string;
+    "--mobile-l": string;
+    "--mobile": string;
+    "--tablet-s": string;
+    "--tablet-m": string;
+    "--tablet": string;
+    "--desktop-s": string;
+    "--desktop-m": string;
+    "--desktop-l": string;
+    "--desktop-xl": string;
+    "--desktop": string;
+};
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/esm/index-72308007.d.ts

@@ -3,9 +3,9 @@ import React from "react";
 import { PaddingType } from "./index-72dda473";
 /* eslint-disable no-plusplus, no-param-reassign */
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
-declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare const isClient: () => boolean;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
@@ -51,4 +51,4 @@ declare const maskUtils: {
     prefixPostprocessor: typeof prefixPostprocessor;
     caretGuard: typeof caretGuard;
 };
-export { createPaddingStyle, isClient, getDataTestId, easingFns, inputUtils, fnUtils, maskUtils };
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils, maskUtils };

package/esm/index-ebda875c.d.ts

@@ -86,6 +86,14 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Дополнительный класс для аддонов
      */
     addonsClassName?: string;
+    /**
+     * Свойства для обертки левых аддонов
+     */
+    leftAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Свойства для обертки правых аддонов
+     */
+    rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -125,6 +133,8 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
     inputWrapperClassName?: string | undefined;
     labelClassName?: string | undefined;
     addonsClassName?: string | undefined;
+    leftAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     dataTestId?: string | undefined;
     children?: ReactNode;
     styles: {

package/index-3109f463.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+type MqProps = {
+    /**
+     * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+     */
+    query?: string;
+    /**
+     * Запрос на поддержку тач-событий
+     */
+    touch?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Обработчик изменений в совпадении запросов
+     */
+    onMatchChange?: (isMatched: boolean) => void;
+};
+declare const Mq: FC<MqProps>;
+/**
+ * Хук для медиа запросов.
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
+ */
+declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
+/**
+ * Возвращает MediaQueryList для заданного media-выражения.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function getMatchMedia(queryProp: string): MediaQueryList;
+/**
+ * Удаляет MediaQueryList.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function releaseMatchMedia(queryProp: string): void;
+/**
+ * Возвращает `true`, если есть поддержка `Pointer Events`
+ */
+declare function isPointerEventsSupported(): boolean;
+/**
+ * Возвращает `true`, если есть поддержка `Touch Events`
+ */
+declare function isTouchSupported(): boolean;
+declare const _exports: {
+    "--mobile-xs": string;
+    "--mobile-s": string;
+    "--mobile-m": string;
+    "--mobile-l": string;
+    "--mobile": string;
+    "--tablet-s": string;
+    "--tablet-m": string;
+    "--tablet": string;
+    "--desktop-s": string;
+    "--desktop-m": string;
+    "--desktop-l": string;
+    "--desktop-xl": string;
+    "--desktop": string;
+};
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/index-72308007.d.ts

@@ -3,9 +3,9 @@ import React from "react";
 import { PaddingType } from "./index-72dda473";
 /* eslint-disable no-plusplus, no-param-reassign */
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
-declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare const isClient: () => boolean;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
@@ -51,4 +51,4 @@ declare const maskUtils: {
     prefixPostprocessor: typeof prefixPostprocessor;
     caretGuard: typeof caretGuard;
 };
-export { createPaddingStyle, isClient, getDataTestId, easingFns, inputUtils, fnUtils, maskUtils };
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils, maskUtils };

package/index-ebda875c.d.ts

@@ -86,6 +86,14 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Дополнительный класс для аддонов
      */
     addonsClassName?: string;
+    /**
+     * Свойства для обертки левых аддонов
+     */
+    leftAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Свойства для обертки правых аддонов
+     */
+    rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -125,6 +133,8 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
     inputWrapperClassName?: string | undefined;
     labelClassName?: string | undefined;
     addonsClassName?: string | undefined;
+    leftAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     dataTestId?: string | undefined;
     children?: ReactNode;
     styles: {

package/modern/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/modern/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

package/modern/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/modern/Component.mobile-ebda875c.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFormControlProps } from "./index-ebda875c";
-type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
-declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
-export { FormControlMobileProps, FormControlMobile };
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-d7e9f69d";
+export { InputMobileProps, InputMobile };

package/modern/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/modern/components/number-input/Component.d.ts

@@ -39,7 +39,7 @@ type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
         valueString: string;
     }) => void;
 };
-declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange" | "value" | "type"> & {
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "onChange" | "type"> & {
     /**
      * Значение поля ввода
      */

package/modern/index-3109f463.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+type MqProps = {
+    /**
+     * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+     */
+    query?: string;
+    /**
+     * Запрос на поддержку тач-событий
+     */
+    touch?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Обработчик изменений в совпадении запросов
+     */
+    onMatchChange?: (isMatched: boolean) => void;
+};
+declare const Mq: FC<MqProps>;
+/**
+ * Хук для медиа запросов.
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
+ */
+declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
+/**
+ * Возвращает MediaQueryList для заданного media-выражения.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function getMatchMedia(queryProp: string): MediaQueryList;
+/**
+ * Удаляет MediaQueryList.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function releaseMatchMedia(queryProp: string): void;
+/**
+ * Возвращает `true`, если есть поддержка `Pointer Events`
+ */
+declare function isPointerEventsSupported(): boolean;
+/**
+ * Возвращает `true`, если есть поддержка `Touch Events`
+ */
+declare function isTouchSupported(): boolean;
+declare const _exports: {
+    "--mobile-xs": string;
+    "--mobile-s": string;
+    "--mobile-m": string;
+    "--mobile-l": string;
+    "--mobile": string;
+    "--tablet-s": string;
+    "--tablet-m": string;
+    "--tablet": string;
+    "--desktop-s": string;
+    "--desktop-m": string;
+    "--desktop-l": string;
+    "--desktop-xl": string;
+    "--desktop": string;
+};
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/modern/index-72308007.d.ts

@@ -3,9 +3,9 @@ import React from "react";
 import { PaddingType } from "./index-72dda473";
 /* eslint-disable no-plusplus, no-param-reassign */
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
-declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare const isClient: () => boolean;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
@@ -51,4 +51,4 @@ declare const maskUtils: {
     prefixPostprocessor: typeof prefixPostprocessor;
     caretGuard: typeof caretGuard;
 };
-export { createPaddingStyle, isClient, getDataTestId, easingFns, inputUtils, fnUtils, maskUtils };
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils, maskUtils };

package/modern/index-ebda875c.d.ts

@@ -86,6 +86,14 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Дополнительный класс для аддонов
      */
     addonsClassName?: string;
+    /**
+     * Свойства для обертки левых аддонов
+     */
+    leftAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Свойства для обертки правых аддонов
+     */
+    rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -125,6 +133,8 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
     inputWrapperClassName?: string | undefined;
     labelClassName?: string | undefined;
     addonsClassName?: string | undefined;
+    leftAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     dataTestId?: string | undefined;
     children?: ReactNode;
     styles: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-number-input",
-    "version": "1.2.4",
+    "version": "1.2.5",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^12.1.4",
+        "@alfalab/core-components-input": "^12.2.0",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     }