@ozen-ui/kit 0.7.0 → 0.9.0

package/__inner__/esm/components/FieldInput/FieldInput.js

@@ -0,0 +1,51 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useCallback, useContext, useState, useEffect } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { FieldControlContext } from '../FieldControl';
+export var FIELD_INPUT_DEFAULT_TAG = 'input';
+export var cnFieldInput = cn('FieldInput');
+export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
+    var _b = _a.as, Tag = _b === void 0 ? FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = __rest(_a, ["as", "className", "required", "disabled", "value", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
+    var _c = __read(useState(), 2), focused = _c[0], setFocused = _c[1];
+    var context = useContext(FieldControlContext);
+    var _d = __read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
+    var _e = __read(useControlled({
+        value: valueProp,
+        name: 'FieldInput',
+        state: 'value',
+        defaultValue: defaultValue
+    }), 2), valueState = _e[0], setValueState = _e[1];
+    var filled = !!valueState || valueState === 0;
+    var required = requiredProp;
+    var disabled = disabledProp;
+    if (fieldControl) {
+        if (required === undefined && fieldControl.required) {
+            required = fieldControl.required;
+        }
+        if (disabled === undefined && fieldControl.disabled) {
+            disabled = fieldControl.disabled;
+        }
+    }
+    useEffect(function () {
+        setFieldControl(function (prevState) { return (__assign(__assign({}, prevState), { filled: filled, focused: focused, value: valueState })); });
+    }, [filled, focused, valueState]);
+    var handleChange = useCallback(function (e) {
+        if (disabled)
+            return;
+        var value = e.target.value;
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange, disabled]);
+    var handleFocus = useCallback(function (e) {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    var handleBlur = useCallback(function (e) {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    return (React.createElement(Tag, __assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, defaultValue: defaultValue, value: valueProp }, other, { ref: ref }), children));
+});
+FieldInput.displayName = 'FieldInput';

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

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

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

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

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

@@ -1,8 +1,10 @@
-import type { HTMLAttributes, Ref } from 'react';
-import * as React from 'react';
 import './FieldLabel.css';
-export declare const fieldLabelSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
-export type FieldLabelSizeVariant = (typeof fieldLabelSizeVariant)[number];
+import type { Ref, ComponentRef, ComponentPropsWithRef } from 'react';
+import React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+export type FieldLabelSizeVariant = FormElementSizeVariant;
+export declare const FIELD_LABEL_DEFAULT_TAG = "span";
+export type FieldLabelRef = ComponentRef<typeof FIELD_LABEL_DEFAULT_TAG>;
 export type FieldLabelProps = {
     /** Если {true} переводит компонент в визуальное состояние заполненный */
     filled?: boolean;
@@ -20,6 +22,6 @@ export type FieldLabelProps = {
     ref?: Ref<HTMLSpanElement>;
     /** Значение компонента */
     children?: string;
-} & HTMLAttributes<HTMLSpanElement>;
+} & ComponentPropsWithRef<typeof FIELD_LABEL_DEFAULT_TAG>;
 export declare const cnFieldLabel: import("@bem-react/classname").ClassNameFormatter;
 export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,14 +1,44 @@
-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, useEffect } from 'react';
+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;
+    useEffect(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 {};