@salutejs/plasma-new-hope 0.84.2-canary.1217.9223107446.0 → 0.85.0-canary.1208.9245279695.0

package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx

@@ -0,0 +1,312 @@
+import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+import { IconButton } from '../IconButton/IconButton';
+
+import { Range } from './Range';
+
+const onChangeFirstValue = action('onChangeFirstValue');
+const onChangeSecondValue = action('onChangeSecondValue');
+const onSearchFirstValue = action('onSearchFirstValue');
+const onSearchSecondValue = action('onSearchSecondValue');
+const onFocusFirstTextfield = action('onFocusFirstTextfield');
+const onFocusSecondTextfield = action('onFocusSecondTextfield');
+const onBlurFirstTextfield = action('onBlurFirstTextfield');
+const onBlurSecondTextfield = action('onBlurSecondTextfield');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default'];
+const dividers = ['none', 'dash', 'icon'];
+
+const meta: Meta<typeof Range> = {
+    title: 'plasma_web/Range',
+    component: Range,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Range> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+    enableFirstTextfieldContentLeft: boolean;
+    enableSecondTextfieldContentLeft: boolean;
+    enableFirstTextfieldContentRight: boolean;
+    enableSecondTextfieldContentRight: boolean;
+};
+
+const getSizeForIcon = (size) => {
+    const map = {
+        m: 's',
+        l: 's',
+        s: 's',
+        xs: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+const ActionButton = ({ size }) => {
+    return (
+        <IconButton view="clear" size={size}>
+            <IconChevronLeft size={getSizeForIcon(size)} />
+        </IconButton>
+    );
+};
+
+const StoryDefault = ({
+    dividerVariant,
+    enableContentLeft,
+    enableContentRight,
+    firstTextfieldTextBefore,
+    secondTextfieldTextBefore,
+    enableFirstTextfieldContentLeft,
+    enableSecondTextfieldContentLeft,
+    enableFirstTextfieldContentRight,
+    enableSecondTextfieldContentRight,
+    size,
+    ...rest
+}: StoryPropsDefault) => {
+    const [firstValue, setFirstValue] = useState('');
+    const [secondValue, setSecondValue] = useState('');
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const showDividerIcon = dividerVariant === 'icon';
+    const showDefaultTextBefore = dividerVariant === 'none';
+
+    const dividerIconProps = {
+        dividerIcon: showDividerIcon ? <IconPlaceholder size="s" /> : null,
+        dividerVariant,
+    };
+
+    return (
+        <Range
+            size={size}
+            firstValue={firstValue}
+            secondValue={secondValue}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            firstTextfieldContentLeft={
+                enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            firstTextfieldContentRight={
+                enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            secondTextfieldContentLeft={
+                enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            secondTextfieldContentRight={
+                enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            firstTextfieldTextBefore={
+                showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
+            }
+            secondTextfieldTextBefore={
+                showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
+            }
+            onChangeFirstValue={(e) => {
+                setFirstValue(e.target.value);
+                onChangeFirstValue(e, e.target.value);
+            }}
+            onChangeSecondValue={(e) => {
+                setSecondValue(e.target.value);
+                onChangeSecondValue(e, e.target.value);
+            }}
+            onSearchFirstValue={onSearchFirstValue}
+            onSearchSecondValue={onSearchSecondValue}
+            onFocusFirstTextfield={onFocusFirstTextfield}
+            onFocusSecondTextfield={onFocusSecondTextfield}
+            onBlurFirstTextfield={onBlurFirstTextfield}
+            onBlurSecondTextfield={onBlurSecondTextfield}
+            {...dividerIconProps}
+            {...rest}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        dividerVariant: {
+            options: dividers,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        label: 'Лейбл',
+        leftHelper: 'Подсказка к полю',
+        firstPlaceholder: 'Заполните поле 1',
+        secondPlaceholder: 'Заполните поле 2',
+        size: 'l',
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        firstTextfieldTextBefore: 'С',
+        secondTextfieldTextBefore: 'ПО',
+        enableContentLeft: true,
+        enableContentRight: true,
+        dividerVariant: 'dash',
+        enableFirstTextfieldContentLeft: false,
+        enableFirstTextfieldContentRight: false,
+        enableSecondTextfieldContentLeft: false,
+        enableSecondTextfieldContentRight: false,
+        firstValueError: false,
+        secondValueError: false,
+        firstValueSuccess: false,
+        secondValueSuccess: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
+    const [firstValue, setFirstValue] = useState('');
+    const [secondValue, setSecondValue] = useState('');
+
+    const [firstValueError, setFirstValueError] = useState(false);
+    const [secondValueError, setSecondValueError] = useState(false);
+
+    const [firstValueSuccess, setFirstValueSuccess] = useState(false);
+    const [secondValueSuccess, setSecondValueSuccess] = useState(false);
+
+    const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
+
+    const handleChangeValue = (
+        e: ChangeEvent<HTMLInputElement>,
+        setter: Dispatch<SetStateAction<string>>,
+        error: boolean,
+        errorSetter: Dispatch<SetStateAction<boolean>>,
+        success: boolean,
+        successSetter: Dispatch<SetStateAction<boolean>>,
+    ) => {
+        const { value } = e.target;
+        if (!checkValue(value)) {
+            return;
+        }
+
+        if (error) {
+            errorSetter(false);
+        }
+
+        if (success) {
+            successSetter(false);
+        }
+
+        setter(value);
+    };
+
+    const firstValueConstraint = (value: number) =>
+        value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
+    const secondValueConstraint = (value: number) =>
+        value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
+
+    const handleCommitValue = (
+        value: string,
+        constraint: (currentValue: number) => boolean,
+        errorSetter: Dispatch<SetStateAction<boolean>>,
+        successSetter: Dispatch<SetStateAction<boolean>>,
+    ) => {
+        if (!value) {
+            return;
+        }
+
+        if (!checkValue(value)) {
+            return errorSetter(true);
+        }
+
+        if (constraint(Number(value))) {
+            return errorSetter(true);
+        }
+
+        successSetter(true);
+    };
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    return (
+        <Range
+            dividerVariant="dash"
+            size={size}
+            firstValue={firstValue}
+            secondValue={secondValue}
+            firstValueError={firstValueError}
+            secondValueError={secondValueError}
+            firstValueSuccess={firstValueSuccess}
+            secondValueSuccess={secondValueSuccess}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            onChangeFirstValue={(e) => {
+                handleChangeValue(
+                    e,
+                    setFirstValue,
+                    firstValueError,
+                    setFirstValueError,
+                    firstValueSuccess,
+                    setFirstValueSuccess,
+                );
+            }}
+            onChangeSecondValue={(e) => {
+                handleChangeValue(
+                    e,
+                    setSecondValue,
+                    secondValueError,
+                    setSecondValueError,
+                    secondValueSuccess,
+                    setSecondValueSuccess,
+                );
+            }}
+            onSearchFirstValue={(e) => {
+                const { value } = e.target as HTMLInputElement;
+                handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
+            }}
+            onSearchSecondValue={(e) => {
+                const { value } = e.target as HTMLInputElement;
+                handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
+            }}
+            onFocusFirstTextfield={onFocusFirstTextfield}
+            onFocusSecondTextfield={onFocusSecondTextfield}
+            onBlurFirstTextfield={onBlurFirstTextfield}
+            onBlurSecondTextfield={onBlurSecondTextfield}
+            {...rest}
+        />
+    );
+};
+
+export const Demo: StoryObj<StoryPropsDefault> = {
+    args: {
+        label: 'Введите кол-во товара',
+        leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
+        firstPlaceholder: '1',
+        secondPlaceholder: '5',
+        size: 'l',
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        firstTextfieldTextBefore: '',
+        secondTextfieldTextBefore: '',
+        enableContentLeft: true,
+        enableContentRight: true,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

package/styled-components/es/index.js

@@ -46,4 +46,5 @@ export * from './components/Progress';
 export * from './components/Select';
 export * from './components/Divider';
 export * from './components/Toolbar';
-export * from './components/Slider';
+export * from './components/Slider';
+export * from './components/Range';

package/types/components/Range/Range.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { RootProps } from '../../engines';
+import type { RangeProps } from './Range.types';
+export declare const rangeRoot: (Root: RootProps<HTMLDivElement, RangeProps>) => React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLInputElement>>;
+export declare const rangeConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, RangeProps>) => React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLInputElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+        readOnly: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+    };
+    defaults: {
+        size: string;
+        view: string;
+    };
+};
+//# sourceMappingURL=Range.d.ts.map

package/types/components/Range/Range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkBhD,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,wFAqIhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAvIQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;CAgKpE,CAAC"}

package/types/components/Range/Range.styles.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+export declare const StyledInput: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & (({
+    size?: string | undefined;
+    view?: string | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    label?: string | undefined;
+    labelPlacement?: "inner" | "outer" | undefined;
+    leftHelper?: string | undefined;
+    contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    textBefore?: string | undefined;
+    textAfter?: string | undefined;
+    onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
+} & {
+    chips?: undefined;
+    onChangeChips?: undefined;
+    enumerationType?: "plain" | undefined;
+    onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
+} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>) | ({
+    size?: string | undefined;
+    view?: string | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    label?: string | undefined;
+    labelPlacement?: "inner" | "outer" | undefined;
+    leftHelper?: string | undefined;
+    contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    textBefore?: string | undefined;
+    textAfter?: string | undefined;
+    onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
+} & {
+    enumerationType: "chip";
+    onSearch?: undefined;
+    chips?: import("../TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
+    onChangeChips?: ((value: import("../TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
+} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>))>;
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const StyledLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & Record<never, unknown>>;
+export declare const LeftHelper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledDivider: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=Range.styles.d.ts.map

package/types/components/Range/Range.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HA+DvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAAQ,CAAC;AAE1B,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC;AAEvC,eAAO,MAAM,cAAc,qKAG1B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAAe,CAAC;AAE1C,eAAO,MAAM,iBAAiB,qKAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,qKAAe,CAAC"}

package/types/components/Range/Range.tokens.d.ts

@@ -0,0 +1,99 @@
+export declare const classes: {
+    rangeError: string;
+    rangeValueError: string;
+    rangeSuccess: string;
+    rangeValueSuccess: string;
+};
+export declare const tokens: {
+    background: string;
+    backgroundError: string;
+    backgroundSuccess: string;
+    backgroundReadOnly: string;
+    borderRadius: string;
+    borderWidth: string;
+    borderColor: string;
+    borderColorError: string;
+    borderColorSuccess: string;
+    borderColorReadOnly: string;
+    /** Токены разделителя */
+    dividerColor: string;
+    dividerColorReadOnly: string;
+    dividerPadding: string;
+    dividerFontFamily: string;
+    dividerFontStyle: string;
+    dividerFontSize: string;
+    dividerFontWeight: string;
+    dividerLetterSpacing: string;
+    dividerLineHeight: string;
+    /** Токены слотов для контента */
+    leftContentMargin: string;
+    rightContentMargin: string;
+    /** Токены лейбла */
+    labelColor: string;
+    labelColorReadOnly: string;
+    labelOffset: string;
+    labelFontFamily: string;
+    labelFontStyle: string;
+    labelFontSize: string;
+    labelFontWeight: string;
+    labelLetterSpacing: string;
+    labelLineHeight: string;
+    /** Токены вспомогательного текста */
+    leftHelperColor: string;
+    leftHelperColorReadOnly: string;
+    leftHelperOffset: string;
+    leftHelperFontFamily: string;
+    leftHelperFontStyle: string;
+    leftHelperFontSize: string;
+    leftHelperFontWeight: string;
+    leftHelperLetterSpacing: string;
+    leftHelperLineHeight: string;
+    /** Прозрачность для всего компонента в состоянии disabled */
+    disabledOpacity: string;
+    /** Цвет обводки поля ввода при фокусе */
+    focusColor: string;
+    /** Токены полей ввода */
+    textFieldColor: string;
+    textFieldFocusColor: string;
+    textFieldPlaceholderColor: string;
+    textFieldCaretColor: string;
+    textFieldBackgroundColor: string;
+    textFieldBackgroundColorHover: string;
+    textFieldBackgroundColorFocus: string;
+    textFieldBackgroundErrorColor: string;
+    textFieldBackgroundErrorColorHover: string;
+    textFieldBackgroundErrorColorFocus: string;
+    textFieldBackgroundSuccessColor: string;
+    textFieldBackgroundSuccessColorHover: string;
+    textFieldBackgroundSuccessColorFocus: string;
+    textFieldBorderColor: string;
+    textFieldBorderColorHover: string;
+    textFieldBorderColorFocus: string;
+    textFieldBorderColorError: string;
+    textFieldBorderColorErrorHover: string;
+    textFieldBorderColorErrorFocus: string;
+    textFieldBorderColorSuccess: string;
+    textFieldBorderColorSuccessHover: string;
+    textFieldBorderColorSuccessFocus: string;
+    textFieldColorReadOnly: string;
+    textFieldBackgroundColorReadOnly: string;
+    textFieldBorderColorReadOnly: string;
+    textFieldPlaceholderColorReadOnly: string;
+    textFieldHeight: string;
+    textFieldBorderWidth: string;
+    textFieldBorderRadius: string;
+    textFieldPadding: string;
+    textFieldLeftContentMargin: string;
+    textFieldRightContentMargin: string;
+    textFieldFontFamily: string;
+    textFieldFontStyle: string;
+    textFieldFontSize: string;
+    textFieldFontWeight: string;
+    textFieldLetterSpacing: string;
+    textFieldLineHeight: string;
+    textFieldTextBeforeColor: string;
+    textFieldTextAfterColor: string;
+    textFieldTextBeforeMargin: string;
+    textFieldTextAfterMargin: string;
+};
+//# sourceMappingURL=Range.tokens.d.ts.map

package/types/components/Range/Range.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;IAYf,yBAAyB;;;;;;;;;;IAWzB,iCAAiC;;;IAIjC,oBAAoB;;;;;;;;;;IAYpB,qCAAqC;;;;;;;;;;IAYrC,6DAA6D;;IAG7D,yCAAyC;;IAGzC,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD5B,CAAC"}

package/types/components/Range/Range.types.d.ts

@@ -0,0 +1,143 @@
+import type { KeyboardEvent, ChangeEvent, ReactNode, HTMLAttributes, ReactElement } from 'react';
+export declare type TextfieldPrimitiveValue = string | number;
+export declare type RangeDividerVariants = {
+    firstTextfieldTextBefore: string;
+    secondTextfieldTextBefore: string;
+    dividerVariant?: 'none';
+    dividerIcon?: never;
+} | {
+    dividerVariant?: 'dash';
+    dividerIcon?: never;
+    firstTextfieldTextBefore?: string;
+    secondTextfieldTextBefore?: string;
+} | {
+    dividerIcon?: ReactNode;
+    dividerVariant?: 'icon';
+    firstTextfieldTextBefore?: string;
+    secondTextfieldTextBefore?: string;
+};
+export declare type BaseCallbackChangeInstance = (event: ChangeEvent<HTMLInputElement>, value?: TextfieldPrimitiveValue) => void;
+export declare type BaseCallbackKeyboardInstance = (event: KeyboardEvent<HTMLInputElement>, value?: TextfieldPrimitiveValue) => void;
+export declare type RangeProps = {
+    /**
+     * Метка-подпись к элементу
+     */
+    label?: string;
+    /**
+     * Вспомогательный текст снизу слева для поля ввода.
+     */
+    leftHelper?: string;
+    /**
+     * Слот для контента слева
+     */
+    contentLeft?: ReactNode;
+    /**
+     * Слот для контента справа
+     */
+    contentRight?: ReactNode;
+    /**
+     * Значение первого поля ввода
+     */
+    firstValue?: TextfieldPrimitiveValue;
+    /**
+     * Значение второго поля ввода
+     */
+    secondValue?: TextfieldPrimitiveValue;
+    /**
+     * Некорректное значение первого поля ввода
+     */
+    firstValueError?: boolean;
+    /**
+     * Некорректное значение второго поля ввода
+     */
+    secondValueError?: boolean;
+    /**
+     * Корректное значение первого поля ввода
+     */
+    firstValueSuccess?: boolean;
+    /**
+     * Корректное значение второго поля ввода
+     */
+    secondValueSuccess?: boolean;
+    /**
+     * Значение первого поля ввода
+     */
+    firstPlaceholder?: string;
+    /**
+     * Значение второго поля ввода
+     */
+    secondPlaceholder?: string;
+    /**
+     * Слот для контента слева для первого поля ввода
+     */
+    firstTextfieldContentLeft?: ReactElement;
+    /**
+     * Слот для контента справа для второго поля ввода
+     */
+    firstTextfieldContentRight?: ReactElement;
+    /**
+     * Слот для контента слева для первого поля ввода
+     */
+    secondTextfieldContentLeft?: ReactElement;
+    /**
+     * Слот для контента справа для второго поля ввода
+     */
+    secondTextfieldContentRight?: ReactElement;
+    /**
+     * Слот для вспомогательного текста справа для первого поля ввода
+     */
+    firstTextfieldTextAfter?: string;
+    /**
+     * Слот для вспомогательного текста справа для второго поля ввода
+     */
+    secondTextfieldTextAfter?: string;
+    /**
+     * Вариант отображения
+     */
+    view?: string;
+    /**
+     * Размер компонента
+     */
+    size?: string;
+    /**
+     * Компонент доступен только для чтения
+     */
+    readOnly?: boolean;
+    /**
+     * Компонент неактивен
+     */
+    disabled?: boolean;
+    /**
+     * Коллбэк, вызываемый при изменении первого поля ввода
+     */
+    onChangeFirstValue?: BaseCallbackChangeInstance;
+    /**
+     * Коллбэк, вызываемый при изменении второго поля ввода
+     */
+    onChangeSecondValue?: BaseCallbackChangeInstance;
+    /**
+     * Коллбэк, вызываемый при нажатии `Enter` в первом поле ввода
+     */
+    onSearchFirstValue?: BaseCallbackKeyboardInstance;
+    /**
+     * Коллбэк, вызываемый при нажатии `Enter` во втором поле ввода
+     */
+    onSearchSecondValue?: BaseCallbackKeyboardInstance;
+    /**
+     * Коллбэк, вызываемый при фокусе на первое поле ввода
+     */
+    onFocusFirstTextfield?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Коллбэк, вызываемый при фокусе на второе поле ввода
+     */
+    onFocusSecondTextfield?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Коллбэк, вызываемый при потере фокуса первым полем ввода
+     */
+    onBlurFirstTextfield?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Коллбэк, вызываемый при потере фокуса вторым полем ввода
+     */
+    onBlurSecondTextfield?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & RangeDividerVariants & HTMLAttributes<HTMLDivElement>;
+//# sourceMappingURL=Range.types.d.ts.map

package/types/components/Range/Range.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.types.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.types.ts"],"names":[],"mappings":"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"}

package/types/components/Range/index.d.ts

@@ -0,0 +1,4 @@
+export { rangeRoot, rangeConfig } from './Range';
+export { tokens as rangeTokens } from './Range.tokens';
+export type { RangeProps } from './Range.types';
+//# sourceMappingURL=index.d.ts.map

package/types/components/Range/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Range/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/types/components/Range/utils/index.d.ts

@@ -0,0 +1,5 @@
+import type { ChangeEvent, KeyboardEvent } from 'react';
+import type { BaseCallbackChangeInstance, BaseCallbackKeyboardInstance } from '../Range.types';
+export declare const getChangeHandler: (changeHandler?: BaseCallbackChangeInstance | undefined, disabled?: boolean | undefined, readOnly?: boolean | undefined) => (event: ChangeEvent<HTMLInputElement>) => void;
+export declare const getSearchHandler: (searchHandler?: BaseCallbackKeyboardInstance | undefined, disabled?: boolean | undefined, readOnly?: boolean | undefined) => (value: string, event?: KeyboardEvent<HTMLInputElement> | undefined) => void;
+//# sourceMappingURL=index.d.ts.map