@ozen-ui/kit 0.8.0 → 0.9.1

package/__inner__/esm/components/FieldLabel/FieldLabel.js

@@ -1,14 +1,45 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { cn } from '../../utils/classname';
+import { __assign, __read } from "tslib";
 import './FieldLabel.css';
-export var fieldLabelSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
+import React, { forwardRef, useContext } from 'react';
+import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
+import { cn } from '../../utils/classname';
+import { FieldControlContext } from '../FieldControl';
+export var FIELD_LABEL_DEFAULT_TAG = 'span';
 export var cnFieldLabel = cn('FieldLabel');
 export var FieldLabel = forwardRef(function (_a, ref) {
-    var focused = _a.focused, children = _a.children, filled = _a.filled, shrink = _a.shrink, required = _a.required, disabled = _a.disabled, className = _a.className, size = _a.size;
-    return (React.createElement("span", { className: cnFieldLabel({ filled: filled, shrink: shrink, focused: focused, disabled: disabled, size: size }, [
-            className,
-        ]), ref: ref },
+    var focusedProp = _a.focused, children = _a.children, filledProp = _a.filled, shrink = _a.shrink, requiredProp = _a.required, disabledProp = _a.disabled, className = _a.className, sizeProp = _a.size;
+    var context = useContext(FieldControlContext);
+    var _b = __read(context, 2), fieldControl = _b[0], setFieldControl = _b[1];
+    var Tag = FIELD_LABEL_DEFAULT_TAG;
+    var size = sizeProp;
+    var required = requiredProp;
+    var disabled = disabledProp;
+    var focused = focusedProp;
+    var filled = filledProp;
+    useIsomorphicEffect(function () {
+        setFieldControl(function (prevState) { return (__assign(__assign({}, prevState), { label: children })); });
+    }, [children]);
+    if (!children) {
+        return null;
+    }
+    if (fieldControl) {
+        if (size === undefined && fieldControl.size) {
+            size = fieldControl.size;
+        }
+        if (required === undefined && fieldControl.required) {
+            required = fieldControl.required;
+        }
+        if (disabled === undefined && fieldControl.disabled) {
+            disabled = fieldControl.disabled;
+        }
+        if (focused === undefined && fieldControl.focused) {
+            focused = fieldControl.focused;
+        }
+        if (filled === undefined && fieldControl.filled) {
+            filled = fieldControl.filled;
+        }
+    }
+    return (React.createElement(Tag, { className: cnFieldLabel({ filled: filled, shrink: shrink, focused: focused, disabled: disabled, size: size, required: required }, [className]), ref: ref },
         children,
         " ",
         required && React.createElement("sup", null, "*")));

package/__inner__/esm/components/Fieldset/Fieldset.css

@@ -0,0 +1,13 @@
+.Fieldset {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+  border-radius: var(--border-radius-xs);
+  border: var(--textfield-border-width) solid var(--textfield-border-color);
+  transition: border var(--transition-default);
+}

package/__inner__/esm/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,10 @@
+import './Fieldset.css';
+import React from 'react';
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
+export declare const FIELDSET_DEFAULT_TAG = "fieldset";
+export type FieldsetRef = ComponentRef<typeof FIELDSET_DEFAULT_TAG>;
+export type FieldsetProps = ComponentPropsWithRef<typeof FIELDSET_DEFAULT_TAG>;
+export declare const cnFieldset: import("@bem-react/classname").ClassNameFormatter;
+export declare const Fieldset: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & {
+    ref?: ((instance: HTMLFieldSetElement | null) => void) | React.RefObject<HTMLFieldSetElement> | null | undefined;
+}, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;

package/__inner__/esm/components/Fieldset/Fieldset.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import './Fieldset.css';
+import React, { forwardRef } from 'react';
+import { cn } from '../../utils/classname';
+export var FIELDSET_DEFAULT_TAG = 'fieldset';
+export var cnFieldset = cn('Fieldset');
+export var Fieldset = forwardRef(function (_a, ref) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var Tag = FIELDSET_DEFAULT_TAG;
+    return React.createElement(Tag, __assign({ className: cnFieldset({}, [className]) }, other, { ref: ref }));
+});
+Fieldset.displayName = 'Fieldset';

package/__inner__/esm/components/Fieldset/index.d.ts

@@ -0,0 +1 @@
+export * from './Fieldset';

package/__inner__/esm/components/Fieldset/index.js

@@ -0,0 +1 @@
+export * from './Fieldset';

package/__inner__/esm/components/FilePicker/FilePicker.css

@@ -1,9 +1,10 @@
 /* stylelint-disable */
 .FilePicker {
-  --file-picker-color: var(--color-content-tertiary);
-  --file-picker-background-color: var(--color-background-primary);
-  --file-picker-border-width: var(--border-width-s);
-  --file-picker-border-color: var(--color-border-main);
+  --textfield-color: var(--color-content-tertiary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   display: inline-flex;
   vertical-align: top;
   flex-direction: column;
@@ -11,14 +12,14 @@
 .FilePicker-Body {
     position: relative;
     display: flex;
-    -moz-column-gap: var(--file-picker-input-gap);
-         column-gap: var(--file-picker-input-gap);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
     align-items: center;
     box-sizing: border-box;
-    padding: 0 var(--file-picker-gutter-x);
-    background-color: var(--file-picker-background-color);
+    padding: 0 var(--textfield-gutter-x);
+    background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--file-picker-color);
+    color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
     cursor: pointer;
   }
@@ -42,9 +43,8 @@
     padding: 0;
     background: none;
     box-sizing: border-box;
-    color: var(--file-picker-color);
-    block-size: var(--file-picker-input-height);
-    font: var(--file-picker-input-font);
+    color: var(--textfield-color);
+    block-size: var(--textfield-input-height);
   }
 .FilePicker-Input {
     inset-block-end: 0;
@@ -57,85 +57,74 @@
 .FilePicker-Input:focus + .FilePicker-Placeholder {
       opacity: 1;
     }
-.FilePicker-Fieldset {
-    position: absolute;
-    inset: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--file-picker-border-width) solid
-      var(--file-picker-border-color);
-    transition: border var(--transition-default);
-  }
 .FilePicker_size_2xs {
-      --file-picker-gutter-x: 12px;
-      --file-picker-input-height: 32px;
-      --file-picker-input-font: var(--typography-text-2xs-font);
-      --file-picker-input-padding: 8px 0 8px;
-      --file-picker-input-gap: var(--space-s);
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 32px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-padding: 8px 0 8px;
+      --textfield-input-gap: var(--space-s);
     }
 .FilePicker_size_xs {
-      --file-picker-gutter-x: 12px;
-      --file-picker-input-height: 40px;
-      --file-picker-input-font: var(--typography-text-xs-font);
-      --file-picker-input-padding: 19px 0 4px;
-      --file-picker-input-gap: var(--space-s);
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+      --textfield-input-gap: var(--space-s);
     }
 .FilePicker_size_s {
-      --file-picker-gutter-x: 16px;
-      --file-picker-input-height: 48px;
-      --file-picker-input-font: var(--typography-text-s-font);
-      --file-picker-input-padding: 21px 0 6px;
-      --file-picker-input-gap: var(--space-m);
+      --textfield-gutter-x: 16px;
+      --textfield-input-height: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+      --textfield-input-gap: var(--space-m);
     }
 .FilePicker_size_m {
-      --file-picker-gutter-x: 20px;
-      --file-picker-input-height: 56px;
-      --file-picker-input-font: var(--typography-text-m-font);
-      --file-picker-input-padding: 24px 0 6px;
-      --file-picker-input-gap: var(--space-m);
+      --textfield-gutter-x: 20px;
+      --textfield-input-height: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+      --textfield-input-gap: var(--space-m);
     }
 .FilePicker_size_l {
-      --file-picker-gutter-x: 24px;
-      --file-picker-input-height: 64px;
-      --file-picker-input-font: var(--typography-text-l-font);
-      --file-picker-input-padding: 26px 0 6px;
-      --file-picker-input-gap: var(--space-l);
+      --textfield-gutter-x: 24px;
+      --textfield-input-height: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+      --textfield-input-gap: var(--space-l);
     }
 .FilePicker_fullWidth {
     inline-size: 100%;
   }
 .FilePicker_hasValue {
-    --file-picker-color: var(--color-content-primary);
+    --textfield-color: var(--color-content-primary);
   }
 .FilePicker_hasLabel .FilePicker-Placeholder {
       opacity: 0;
     }
 .FilePicker_hasLabel .FilePicker-FileName,
     .FilePicker_hasLabel .FilePicker-Placeholder {
-      padding: var(--file-picker-input-padding);
-      font: var(--file-picker-input-font);
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
     }
 .FilePicker:hover {
-    --file-picker-border-color: var(--color-border-main-hover);
+    --textfield-border-color: var(--color-border-main-hover);
   }
 .FilePicker_focused,
   .FilePicker_focused:hover {
-    --file-picker-border-width: var(--border-width-m);
-    --file-picker-background-color: var(--color-background-main);
-    --file-picker-border-color: var(--color-border-action);
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
   }
 .FilePicker_error,
   .FilePicker_error.FilePicker:hover,
   .FilePicker_error.FilePicker_focused,
   .FilePicker_error.FilePicker_focused:hover {
-    --file-picker-border-color: var(--color-border-error);
+    --textfield-border-color: var(--color-border-error);
   }
 .FilePicker_disabled {
-    --file-picker-border-color: var(--color-border-disabled);
-    --file-picker-background-color: var(--color-background-disabled);
-    --file-picker-color: var(--color-content-secondary);
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
     pointer-events: none;
     cursor: default;
   }

package/__inner__/esm/components/FilePicker/FilePicker.js

@@ -9,6 +9,7 @@ import { isKey } from '../../utils/isKey';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
 import { FieldLabel } from '../FieldLabel';
+import { Fieldset } from '../Fieldset';
 import { IconButton } from '../IconButton';
 import { FILE_PICKER_DEFAULT_SIZE, FILE_PICKER_DEFAULT_PLACEHOLDER, FILE_PICKER_DEFAULT_DISABLED, FILE_PICKER_DEFAULT_REQUIRED, FILE_PICKER_DEFAULT_FULL_WIDTH, FILE_PICKER_DEFAULT_DISABLE_TRUNCATE, FILE_PICKER_DEFAULT_VALUE_RENDERER, FILE_PICKER_DEFAULT_MULTIPLE, FILE_PICKER_DEFAULT_MULTIPLE_CLEAR_TEXT, } from './constants';
 export var cnFilePicker = cn('FilePicker');
@@ -69,7 +70,7 @@ export var FilePicker = forwardRef(function (inProps, ref) {
                 (fileList === null || fileList === void 0 ? void 0 : fileList.length) ? (React.createElement("span", { className: cnFilePicker('FileName') }, renderValue(fileList, disableTruncate))) : (React.createElement("span", { "aria-placeholder": placeholder, className: cnFilePicker('Placeholder') }, placeholder))),
             !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && onClearProp && (React.createElement(IconButton, { tabIndex: -1, variant: "function", "aria-label": clearText, ref: clearRef, onClick: onClear, size: size, icon: CloseIcon })),
             React.createElement(FieldIcon, { className: cnFilePicker('RenderRight'), icon: renderRight, size: size }),
-            React.createElement("fieldset", { className: cnFilePicker('Fieldset') })),
+            React.createElement(Fieldset, { className: cnFilePicker('Fieldset') })),
         React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 FilePicker.displayName = 'FilePicker';

package/__inner__/esm/components/Input/Input.css

@@ -1,30 +1,3 @@
-/* stylelint-disable */
-.Input {
-  --textfield-color: var(--color-content-primary);
-  --textfield-background-color: var(--color-background-primary);
-  --textfield-border-width: var(--border-width-s);
-  --textfield-border-color: var(--color-border-main);
-  cursor: text;
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
-}
-.Input > * {
-    cursor: text;
-  }
-.Input-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    transition: border var(--transition-default);
-  }
 .Input-Body {
     position: relative;
     display: flex;
@@ -38,133 +11,48 @@
     color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
   }
-.Input-FieldContainer {
+  .Input-FieldContainer {
     inline-size: 100%;
     position: relative;
   }
-.Input-Field {
+  .Input-Field {
     border: none;
     outline: none;
     display: flex;
     inline-size: 100%;
-    padding: 0;
+    padding: var(--textfield-input-padding);
     background: none;
     color: var(--textfield-color);
     box-sizing: border-box;
     block-size: var(--textfield-input-height);
-    font: var(--textfield-input-font);
+    font: inherit;
   }
-.Input-Field::placeholder {
+  .Input-Field::placeholder {
       opacity: 1;
       color: var(--color-content-tertiary);
     }
-.Input-Field:-webkit-autofill,
+  .Input-Field:-webkit-autofill,
     .Input-Field:-webkit-autofill:hover,
     .Input-Field:-webkit-autofill:focus {
       box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
       background-color: transparent !important;
       -webkit-text-fill-color: var(--color-content-info-dark);
     }
-.Input-Field::-webkit-outer-spin-button,
+  .Input-Field::-webkit-outer-spin-button,
     .Input-Field::-webkit-inner-spin-button {
       -webkit-appearance: none;
               appearance: none;
       margin: 0;
     }
-.Input-Field::-webkit-calendar-picker-indicator {
+  .Input-Field::-webkit-calendar-picker-indicator {
       opacity: 0;
       position: absolute;
       inset-block-start: 50%;
       transform: translateY(-50%);
       cursor: pointer;
     }
-.Input-Field[type='number'] {
+  .Input-Field[type='number'] {
       -webkit-appearance: textfield;
          -moz-appearance: textfield;
               appearance: textfield;
     }
-.Input_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--space-s);
-    }
-.Input_size_2xs .Input-Field::-webkit-calendar-picker-indicator {
-        inset-inline-end: -25px;
-      }
-.Input_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
-      --textfield-input-font: var(--typography-text-xs-font);
-      --textfield-input-padding: 19px 0 4px;
-      --textfield-input-gap: var(--space-s);
-    }
-.Input_size_xs .Input-Field::-webkit-calendar-picker-indicator {
-        inset-inline-end: -25px;
-      }
-.Input_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-height: 48px;
-      --textfield-input-font: var(--typography-text-s-font);
-      --textfield-input-padding: 21px 0 6px;
-      --textfield-input-gap: var(--space-m);
-    }
-.Input_size_s .Input-Field::-webkit-calendar-picker-indicator {
-        inset-inline-end: -30px;
-      }
-.Input_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-height: 56px;
-      --textfield-input-font: var(--typography-text-m-font);
-      --textfield-input-padding: 24px 0 6px;
-      --textfield-input-gap: var(--space-m);
-    }
-.Input_size_m .Input-Field::-webkit-calendar-picker-indicator {
-        inset-inline-end: -34px;
-      }
-.Input_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-height: 64px;
-      --textfield-input-font: var(--typography-text-l-font);
-      --textfield-input-padding: 26px 0 6px;
-      --textfield-input-gap: var(--space-l);
-    }
-.Input_size_l .Input-Field::-webkit-calendar-picker-indicator {
-        inset-inline-end: -39px;
-      }
-.Input_fullWidth {
-    inline-size: 100%;
-  }
-.Input_hasLabel .Input-Field {
-      padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
-    }
-.Input_hasLabel .Input-Field::placeholder {
-        opacity: 0;
-      }
-.Input_hasLabel .Input-Field:focus::placeholder {
-        opacity: 1;
-      }
-.Input:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.Input_focused,
-  .Input_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.Input_error,
-  .Input_error.Input:hover,
-  .Input_error.Input_focused,
-  .Input_error.Input_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.Input_disabled {
-    --textfield-border-color: var(--color-border-disabled);
-    --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
-    cursor: default;
-  }

package/__inner__/esm/components/Input/Input.d.ts

@@ -1,66 +1,5 @@
 import './Input.css';
 import React from 'react';
-import type { HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { type FieldIconProps } from '../FieldIcon';
-import { type FieldLabelProps } from '../FieldLabel';
-export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
-export type InputTypeVariant = (typeof inputTypeVariant)[number];
-export type InputSizeVariant = FormElementSizeVariant;
-type InputElement = InputHTMLAttributes<HTMLInputElement>;
-export type InputProps = {
-    /** Атрибут id для элемента input */
-    id?: string;
-    /** Атрибут name для элемента input */
-    name?: string;
-    /** Лейбл */
-    label?: string;
-    /** Размер компонента */
-    size?: InputSizeVariant;
-    /** Подсказка. Отображается, когда вариант не выбран */
-    placeholder?: string;
-    /** Если {true} устанавливает автофокус */
-    autoFocus?: boolean;
-    /** Если {true} переводит поле в состояние ошибки */
-    error?: boolean;
-    /** Если {true} растягивает поле на всю ширину */
-    fullWidth?: boolean;
-    /** Дополнительное описание к полю */
-    hint?: string | null | undefined;
-    /** Атрибут type для элемента input */
-    type?: InputTypeVariant;
-    /** Если {true} делает элемент неактивным */
-    disabled?: boolean;
-    /** Если {true} делает элемент обязательным к заполнению */
-    required?: boolean;
-    /** Минимальное количество символов разрешенных для ввода */
-    minLength?: InputElement['minLength'];
-    /** Максимальное количество символов разрешенных для ввода */
-    maxLength?: InputElement['maxLength'];
-    /** Текст или иконка слева */
-    renderLeft?: FieldIconProps['icon'];
-    /** Текст или иконка справа */
-    renderRight?: FieldIconProps['icon'];
-    /** Выбранное значение */
-    value?: InputElement['value'];
-    /** Значение по умолчанию (неконтролируемый компонент) */
-    defaultValue?: InputElement['defaultValue'];
-    /** Обработчик события на изменение значения поля */
-    onChange?: InputElement['onChange'];
-    /** Ссылка на элемент input */
-    inputRef?: Ref<HTMLInputElement>;
-    /** Свойства элемента input */
-    inputProps?: InputElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
-    /** Свойства FieldLabel */
-    labelProps?: FieldLabelProps;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: Ref<HTMLDivElement>;
-    'data-testid'?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+import type { InputProps } from './index';
 export declare const cnInput: import("@bem-react/classname").ClassNameFormatter;
 export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/__inner__/esm/components/Input/Input.js

@@ -1,71 +1,50 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import './Input.css';
-import React, { useState, useCallback, useRef, forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
+import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { FieldControl } from '../FieldControl';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
+import { FieldInput } from '../FieldInput';
 import { FieldLabel } from '../FieldLabel';
-export var inputTypeVariant = [
-    'number',
-    'date',
-    'datetime-local',
-    'time',
-    'text',
-    'tel',
-    'password',
-    'email',
-];
+import { Fieldset } from '../Fieldset';
+import { INPUT_DEFAULT_SIZE } from './constants';
 export var cnInput = cn('Input');
 export var Input = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Input'
     });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelRef", "labelProps"]);
-    var isControlled = typeof valueProp !== 'undefined';
-    var _b = __read(useState(), 2), focused = _b[0], setFocused = _b[1];
-    var fieldRef = useRef(null);
-    var _c = __read(useState(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
-    var filled = isControlled
-        ? !!valueProp || valueProp === 0
-        : !!valueState || valueState === 0;
-    var handleChange = useCallback(function (e) {
-        if (disabled)
-            return;
-        var value = e.target.value;
-        if (!isControlled) {
-            setValueState(value);
+    var _a = props.size, size = _a === void 0 ? INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelProps = props.labelProps, labelRef = props.labelRef, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelProps", "labelRef"]);
+    var labelInnerRef = useRef(null);
+    var fieldInnerRef = useRef(null);
+    /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
+     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
+     * так как в противном случае мы сломаем возможность выделять текст для копирования.
+     */
+    useEventListener({
+        element: labelInnerRef,
+        eventName: 'mousedown',
+        handler: function (e) {
+            var _a;
+            if (e.target !== fieldInnerRef.current) {
+                e.preventDefault();
+                (_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, isControlled, disabled]);
-    var handleFocus = useCallback(function (e) {
-        var _a;
-        setFocused(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus]);
-    var handleBlur = useCallback(function (e) {
-        var _a;
-        setFocused(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur]);
-    return (React.createElement("div", __assign({}, other, { ref: ref, className: cnInput({
-            fullWidth: fullWidth,
-            size: size,
-            error: error,
-            disabled: disabled,
-            required: required,
-            hasLabel: !!label,
-            focused: focused
-        }, [className]) }),
-        React.createElement("label", { className: cnInput('Body') },
-            React.createElement(FieldIcon, { className: cnInput('RenderLeft'), icon: renderLeft, size: size }),
+    });
+    return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInput({}, [className]) }),
+        React.createElement("label", { className: cnInput('Body'), ref: labelInnerRef },
+            React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnInput('FieldContainer') },
-                label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnInput('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-                React.createElement("input", __assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueProp, type: type, defaultValue: defaultValue, required: required, placeholder: placeholder }, inputProps, { className: cnInput('Field', { filled: filled }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: useMultiRef([inputRef, fieldRef]) }))),
-            React.createElement(FieldIcon, { className: cnInput('RenderRight'), icon: renderRight, size: size }),
-            React.createElement("fieldset", { className: cnInput('Fieldset') })),
-        React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+                React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
+                React.createElement(FieldInput, __assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange }, inputProps, { className: cnInput('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
+            React.createElement(FieldIcon, { icon: renderRight }),
+            React.createElement(Fieldset, null)),
+        React.createElement(FieldHint, null, hint)));
 });
 Input.displayName = 'Input';

package/__inner__/esm/components/Input/constants.d.ts

@@ -0,0 +1 @@
+export declare const INPUT_DEFAULT_SIZE = "m";

package/__inner__/esm/components/Input/constants.js

@@ -0,0 +1 @@
+export var INPUT_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/Input/index.d.ts

@@ -1 +1,2 @@
 export * from './Input';
+export * from './types';