@ozen-ui/kit 0.8.0 → 0.9.0

package/FieldControl/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/FieldControl/index.js",
+	"module": "../__inner__/esm/components/FieldControl/index.js",
+	"types": "../__inner__/esm/components/FieldControl/index.d.ts"
+}

package/FieldInput/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/FieldInput/index.js",
+	"module": "../__inner__/esm/components/FieldInput/index.js",
+	"types": "../__inner__/esm/components/FieldInput/index.d.ts"
+}

package/Fieldset/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Fieldset/index.js",
+	"module": "../__inner__/esm/components/Fieldset/index.js",
+	"types": "../__inner__/esm/components/Fieldset/index.d.ts"
+}

package/__inner__/cjs/components/Backdrop/Backdrop.d.ts

@@ -1,7 +1,7 @@
 import './Backdrop.css';
 import type { CSSProperties, ElementType, ReactNode } from 'react';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import { BACKDROP_DEFAULT_TAG } from './constants';
 export type BackdropBaseProps = {
     /** Признак по которому компонент будет представлен */

package/__inner__/cjs/components/Breadcrumbs/types.d.ts

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react';
+import type { HTMLAttributes, FC } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 export declare const breadcrumbsSizeVariant: readonly ["xs", "s"];
 export type BreadcrumbsSizeVariant = (typeof breadcrumbsSizeVariant)[number];
-export type BreadcrumbsSeparatorComponent = React.FC<IconProps>;
+export type BreadcrumbsSeparatorComponent = FC<IconProps>;
 export type BreadcrumbsContextValue = {
     /** Размер */
     size: BreadcrumbsSizeVariant;

package/__inner__/cjs/components/DataList/DataList.d.ts

@@ -1,7 +1,7 @@
 import './DataList.css';
 import React from 'react';
 import type { ReactNode } from 'react';
-import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import { type ListProps } from '../List';
 import { type PopoverProps } from '../Popover';
 export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/DataList/DataListProvider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { SyntheticEvent, MouseEvent } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 export type DataListSelectPayload = {
     name?: string;
@@ -10,9 +10,9 @@ export type DataListContextState = {
     selected?: string;
     keyboardHighlight: boolean;
     size: FormElementSizeVariant;
-    onSelect?: (event: React.SyntheticEvent, option: string) => void;
-    onMouseMove?: (event: React.MouseEvent<HTMLLIElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    onSelect?: (event: SyntheticEvent, option: string) => void;
+    onMouseMove?: (event: MouseEvent<HTMLLIElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLLIElement>) => void;
 };
-export declare const DataListContext: React.Context<DataListContextState>;
+export declare const DataListContext: import("react").Context<DataListContextState>;
 export declare const useDataListContext: () => DataListContextState;

package/__inner__/cjs/components/FieldControl/FieldControl.css

@@ -0,0 +1,135 @@
+/* stylelint-disable */
+.FieldControl {
+  --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;
+}
+.FieldControl > * {
+    cursor: text;
+  }
+.FieldControl_size_2xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 32px;
+      --textfield-input-padding: 8px 0;
+      --textfield-input-gap: var(--space-s);
+
+      font: var(--typography-text-2xs-font);
+
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+
+      text-transform: var(--typography-text-2xs-text_transform, none);
+    }
+.FieldControl_size_2xs .FieldInput::-webkit-calendar-picker-indicator {
+        inset-inline-end: -25px;
+      }
+.FieldControl_size_xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-padding: 12px 0;
+      --textfield-input-gap: var(--space-s);
+
+      font: var(--typography-text-xs-font);
+
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+
+      text-transform: var(--typography-text-xs-text_transform, none);
+    }
+.FieldControl_size_xs .FieldInput::-webkit-calendar-picker-indicator {
+        inset-inline-end: -25px;
+      }
+.FieldControl_size_s {
+      --textfield-gutter-x: 16px;
+      --textfield-input-height: 48px;
+      --textfield-input-padding: 14px 0;
+      --textfield-input-gap: var(--space-m);
+
+      font: var(--typography-text-s-font);
+
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.FieldControl_size_s .FieldInput::-webkit-calendar-picker-indicator {
+        inset-inline-end: -30px;
+      }
+.FieldControl_size_m {
+      --textfield-gutter-x: 20px;
+      --textfield-input-height: 56px;
+      --textfield-input-padding: 16px 0;
+      --textfield-input-gap: var(--space-m);
+
+      font: var(--typography-text-m-font);
+
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.FieldControl_size_m .FieldInput::-webkit-calendar-picker-indicator {
+        inset-inline-end: -34px;
+      }
+.FieldControl_size_l {
+      --textfield-gutter-x: 24px;
+      --textfield-input-height: 64px;
+      --textfield-input-padding: 18px 0;
+      --textfield-input-gap: var(--space-l);
+
+      font: var(--typography-text-l-font);
+
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.FieldControl_size_l .FieldInput::-webkit-calendar-picker-indicator {
+        inset-inline-end: -39px;
+      }
+.FieldControl_hasLabel.FieldControl_size_2xs {
+        --textfield-input-padding: 8px 0 8px;
+      }
+.FieldControl_hasLabel.FieldControl_size_xs {
+        --textfield-input-padding: 19px 0 4px;
+      }
+.FieldControl_hasLabel.FieldControl_size_s {
+        --textfield-input-padding: 21px 0 6px;
+      }
+.FieldControl_hasLabel.FieldControl_size_m {
+        --textfield-input-padding: 24px 0 6px;
+      }
+.FieldControl_hasLabel.FieldControl_size_l {
+        --textfield-input-padding: 26px 0 6px;
+      }
+.FieldControl_hasLabel .FieldInput::placeholder {
+        opacity: 0;
+      }
+.FieldControl_hasLabel .FieldInput:focus::placeholder {
+        opacity: 1;
+      }
+.FieldControl_fullWidth {
+    inline-size: 100%;
+  }
+.FieldControl:hover {
+    --textfield-border-color: var(--color-border-main-hover);
+  }
+.FieldControl_focused,
+  .FieldControl_focused:hover {
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
+  }
+.FieldControl_error,
+  .FieldControl_error.FieldControl:hover,
+  .FieldControl_error.FieldControl_focused,
+  .FieldControl_error.FieldControl_focused:hover {
+    --textfield-border-color: var(--color-border-error);
+  }
+.FieldControl_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__/cjs/components/FieldControl/FieldControl.d.ts

@@ -0,0 +1,13 @@
+import './FieldControl.css';
+import type { ElementType, ComponentRef } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { FieldControlContextValue } from './index';
+export declare const FIELD_CONTROL_DEFAULT_TAG = "div";
+export type FieldControlRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+export type FieldControlBaseProps = Omit<FieldControlContextValue, 'label'> & {
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+};
+export type FieldControlProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FieldControlBaseProps, As>;
+export declare const cnFieldControl: import("@bem-react/classname").ClassNameFormatter;
+export declare const FieldControl: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldControlBaseProps, "div">;

package/__inner__/cjs/components/FieldControl/FieldControl.js

@@ -0,0 +1,82 @@
+"use strict";
+exports.__esModule = true;
+exports.FieldControl = exports.cnFieldControl = exports.FIELD_CONTROL_DEFAULT_TAG = void 0;
+var tslib_1 = require("tslib");
+require("./FieldControl.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var index_1 = require("./index");
+exports.FIELD_CONTROL_DEFAULT_TAG = 'div';
+exports.cnFieldControl = (0, classname_1.cn)('FieldControl');
+exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'FieldControl'
+    });
+    var _a = props.as, Tag = _a === void 0 ? exports.FIELD_CONTROL_DEFAULT_TAG : _a, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = tslib_1.__rest(props, ["as", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
+    var focused = focusedProp;
+    var filled = filledProp;
+    var size = sizeProp;
+    var required = requiredProp;
+    var disabled = disabledProp;
+    var error = errorProp;
+    var fullWidth = fullWidthProp;
+    var initialState = {
+        size: size,
+        filled: filled,
+        focused: focused,
+        disabled: disabled,
+        required: required,
+        error: error,
+        fullWidth: fullWidth
+    };
+    var _b = tslib_1.__read((0, react_1.useState)(initialState), 2), state = _b[0], setState = _b[1];
+    var label = state.label, value = state.value;
+    if (size === undefined && state.size) {
+        size = state.size;
+    }
+    if (focused === undefined && state.focused) {
+        focused = state.focused;
+    }
+    if (filled === undefined && state.filled) {
+        filled = state.filled;
+    }
+    if (disabled === undefined && state.disabled) {
+        disabled = state.disabled;
+    }
+    if (required === undefined && state.required) {
+        required = state.required;
+    }
+    if (error === undefined && state.error) {
+        error = state.error;
+    }
+    if (fullWidth === undefined && state.fullWidth) {
+        fullWidth = state.fullWidth;
+    }
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldControl)({
+            error: error,
+            fullWidth: fullWidth,
+            disabled: disabled,
+            required: required,
+            size: size,
+            filled: filled,
+            focused: focused,
+            hasLabel: !!label
+        }, [className]) }, otherProp, { ref: ref }),
+        react_1["default"].createElement(index_1.FieldControlContext.Provider, { value: [
+                {
+                    error: error,
+                    fullWidth: fullWidth,
+                    disabled: disabled,
+                    required: required,
+                    size: size,
+                    filled: filled,
+                    focused: focused,
+                    value: value
+                },
+                setState,
+            ] }, children)));
+});
+exports.FieldControl.displayName = 'FieldControl';

package/__inner__/cjs/components/FieldControl/FieldControlContext.d.ts

@@ -0,0 +1,15 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+export type FieldControlContextValue = {
+    size?: FormElementSizeVariant;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    label?: string;
+    value?: string | number;
+};
+export declare const FieldControlContext: React.Context<[FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>]>;

package/__inner__/cjs/components/FieldControl/FieldControlContext.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.FieldControlContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.FieldControlContext = react_1["default"].createContext([{}, function () { return undefined; }]);

package/__inner__/cjs/components/FieldControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldControl';
+export * from './FieldControlContext';

package/__inner__/cjs/components/FieldControl/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FieldControl"), exports);
+tslib_1.__exportStar(require("./FieldControlContext"), exports);

package/__inner__/cjs/components/FieldHint/FieldHint.d.ts

@@ -1,17 +1,14 @@
 import './FieldHint.css';
 import React from 'react';
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { ReactNode, ComponentPropsWithRef, ComponentRef } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-export type FieldHintProps = {
+export declare const FIELD_HINT_DEFAULT_TAG = "div";
+export type FieldHintRef = ComponentRef<typeof FIELD_HINT_DEFAULT_TAG>;
+export type FieldHintProps = ComponentPropsWithRef<typeof FIELD_HINT_DEFAULT_TAG> & {
     children?: ReactNode;
     error?: boolean;
     disabled?: boolean;
     size?: FormElementSizeVariant;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+};
 export declare const cnFieldHint: import("@bem-react/classname").ClassNameFormatter;
-export declare const FieldHint: React.ForwardRefExoticComponent<{
-    children?: ReactNode;
-    error?: boolean | undefined;
-    disabled?: boolean | undefined;
-    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldHint: React.ForwardRefExoticComponent<Omit<FieldHintProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/FieldHint/FieldHint.js

@@ -1,16 +1,36 @@
 "use strict";
 exports.__esModule = true;
-exports.FieldHint = exports.cnFieldHint = void 0;
+exports.FieldHint = exports.cnFieldHint = exports.FIELD_HINT_DEFAULT_TAG = void 0;
 var tslib_1 = require("tslib");
 require("./FieldHint.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var classname_1 = require("../../utils/classname");
+var FieldControl_1 = require("../FieldControl");
+exports.FIELD_HINT_DEFAULT_TAG = 'div';
 exports.cnFieldHint = (0, classname_1.cn)('FieldHint');
 exports.FieldHint = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, error = _a.error, disabled = _a.disabled, size = _a.size, className = _a.className, other = tslib_1.__rest(_a, ["children", "error", "disabled", "size", "className"]);
-    if (!children) {
+    var children = _a.children, errorProp = _a.error, disabledProp = _a.disabled, sizeProp = _a.size, className = _a.className, other = tslib_1.__rest(_a, ["children", "error", "disabled", "size", "className"]);
+    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _b = tslib_1.__read(context, 1), fieldControl = _b[0];
+    var Tag = exports.FIELD_HINT_DEFAULT_TAG;
+    var size = sizeProp;
+    var error = errorProp;
+    var disabled = disabledProp;
+    var childrenCount = react_1.Children.toArray(children).filter(function (element) { return element !== undefined; }).length;
+    if (!childrenCount) {
         return null;
     }
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnFieldHint)({ error: error, disabled: disabled, size: size }, [className]) }, other, { ref: ref }), children));
+    if (fieldControl) {
+        if (size === undefined && fieldControl.size) {
+            size = fieldControl.size;
+        }
+        if (error === undefined && fieldControl.error) {
+            error = fieldControl.error;
+        }
+        if (disabled === undefined && fieldControl.disabled) {
+            disabled = fieldControl.disabled;
+        }
+    }
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldHint)({ error: error, disabled: disabled, size: size }, [className]) }, other, { ref: ref }), children));
 });
 exports.FieldHint.displayName = 'FieldHint';

package/__inner__/cjs/components/FieldIcon/FieldIcon.css

@@ -2,25 +2,5 @@
   display: flex;
   align-items: center;
   color: var(--color-content-secondary);
-  font: var(--field-icon-input-font);
+  font: inherit;
 }
-
-  .FieldIcon_size_2xs {
-      --field-icon-input-font: var(--typography-text-2xs-font);
-    }
-
-  .FieldIcon_size_xs {
-      --field-icon-input-font: var(--typography-text-xs-font);
-    }
-
-  .FieldIcon_size_s {
-      --field-icon-input-font: var(--typography-text-s-font);
-    }
-
-  .FieldIcon_size_m {
-      --field-icon-input-font: var(--typography-text-m-font);
-    }
-
-  .FieldIcon_size_l {
-      --field-icon-input-font: var(--typography-text-l-font);
-    }

package/__inner__/cjs/components/FieldIcon/FieldIcon.d.ts

@@ -1,20 +1,16 @@
 import './FieldIcon.css';
+import type { ComponentPropsWithRef, ComponentRef, FC } from 'react';
 import React from 'react';
-import type { HTMLAttributes } from 'react';
 import type { IconProps, IconSize } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-export type FieldIconProps = {
-    icon?: string | React.FC<IconProps & {
+export declare const FIELD_ICON_DEFAULT_TAG = "div";
+export type FieldIconRef = ComponentRef<typeof FIELD_ICON_DEFAULT_TAG>;
+export type FieldIconProps = ComponentPropsWithRef<typeof FIELD_ICON_DEFAULT_TAG> & {
+    icon?: string | FC<IconProps & {
         size?: IconSize;
     }> | undefined;
-    size: FormElementSizeVariant;
+    size?: FormElementSizeVariant;
     children?: never;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+};
 export declare const cnFieldIcon: import("@bem-react/classname").ClassNameFormatter;
-export declare const FieldIcon: React.ForwardRefExoticComponent<{
-    icon?: string | React.FC<IconProps & {
-        size?: IconSize;
-    }> | undefined;
-    size: FormElementSizeVariant;
-    children?: undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldIcon: React.ForwardRefExoticComponent<Omit<FieldIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/FieldIcon/FieldIcon.js

@@ -1,27 +1,38 @@
 "use strict";
 exports.__esModule = true;
-exports.FieldIcon = exports.cnFieldIcon = void 0;
+exports.FieldIcon = exports.cnFieldIcon = exports.FIELD_ICON_DEFAULT_TAG = void 0;
 var tslib_1 = require("tslib");
 require("./FieldIcon.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_is_1 = require("react-is");
 var classname_1 = require("../../utils/classname");
 var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var FieldControl_1 = require("../FieldControl");
+exports.FIELD_ICON_DEFAULT_TAG = 'div';
 exports.cnFieldIcon = (0, classname_1.cn)('FieldIcon');
 var resolveChildren = function (Content, size) {
     if (typeof Content === 'string') {
         return Content;
     }
     if ((0, react_is_1.isValidElementType)(Content)) {
-        return react_1["default"].createElement(Content, { size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size) });
+        return react_1["default"].createElement(Content, { size: size && (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size) });
     }
     return null;
 };
 exports.FieldIcon = (0, react_1.forwardRef)(function (_a, ref) {
-    var icon = _a.icon, className = _a.className, size = _a.size, other = tslib_1.__rest(_a, ["icon", "className", "size"]);
+    var icon = _a.icon, className = _a.className, sizeProp = _a.size, other = tslib_1.__rest(_a, ["icon", "className", "size"]);
+    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _b = tslib_1.__read(context, 1), fieldControl = _b[0];
+    var Tag = exports.FIELD_ICON_DEFAULT_TAG;
+    var size = sizeProp;
     if (!icon) {
         return null;
     }
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnFieldIcon)({ size: size }, [className]) }, other, { ref: ref }), resolveChildren(icon, size)));
+    if (fieldControl) {
+        if (size === undefined && fieldControl.size) {
+            size = fieldControl.size;
+        }
+    }
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldIcon)({ size: size }, [className]) }, other, { ref: ref }), resolveChildren(icon, size)));
 });
 exports.FieldIcon.displayName = 'FieldIcon';

package/__inner__/cjs/components/FieldInput/FieldInput.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const FIELD_INPUT_DEFAULT_TAG = "input";
+export type FieldInputRef = ComponentRef<typeof FIELD_INPUT_DEFAULT_TAG>;
+type FieldInputBaseProps = {
+    'data-testid'?: string;
+};
+export type FieldInputProps<As extends ElementType = typeof FIELD_INPUT_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FieldInputBaseProps, As>;
+export declare const cnFieldInput: import("@bem-react/classname").ClassNameFormatter;
+export declare const FieldInput: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldInputBaseProps, "div">;
+export {};

package/__inner__/cjs/components/FieldInput/FieldInput.js

@@ -0,0 +1,54 @@
+"use strict";
+exports.__esModule = true;
+exports.FieldInput = exports.cnFieldInput = exports.FIELD_INPUT_DEFAULT_TAG = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var FieldControl_1 = require("../FieldControl");
+exports.FIELD_INPUT_DEFAULT_TAG = 'input';
+exports.cnFieldInput = (0, classname_1.cn)('FieldInput');
+exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var _b = _a.as, Tag = _b === void 0 ? exports.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 = tslib_1.__rest(_a, ["as", "className", "required", "disabled", "value", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
+    var _c = tslib_1.__read((0, react_1.useState)(), 2), focused = _c[0], setFocused = _c[1];
+    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _d = tslib_1.__read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
+    var _e = tslib_1.__read((0, useControlled_1.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;
+        }
+    }
+    (0, react_1.useEffect)(function () {
+        setFieldControl(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { filled: filled, focused: focused, value: valueState })); });
+    }, [filled, focused, valueState]);
+    var handleChange = (0, react_1.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 = (0, react_1.useCallback)(function (e) {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, defaultValue: defaultValue, value: valueProp }, other, { ref: ref }), children));
+});
+exports.FieldInput.displayName = 'FieldInput';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FieldInput"), exports);

package/__inner__/cjs/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>>;