@ozen-ui/kit 0.8.0 → 0.9.0

package/__inner__/esm/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__/esm/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__/esm/components/FieldControl/FieldControl.js

@@ -0,0 +1,79 @@
+import { __assign, __read, __rest } from "tslib";
+import './FieldControl.css';
+import React, { useState } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { FieldControlContext } from './index';
+export var FIELD_CONTROL_DEFAULT_TAG = 'div';
+export var cnFieldControl = cn('FieldControl');
+export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'FieldControl'
+    });
+    var _a = props.as, Tag = _a === void 0 ? 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 = __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 = __read(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.createElement(Tag, __assign({ className: cnFieldControl({
+            error: error,
+            fullWidth: fullWidth,
+            disabled: disabled,
+            required: required,
+            size: size,
+            filled: filled,
+            focused: focused,
+            hasLabel: !!label
+        }, [className]) }, otherProp, { ref: ref }),
+        React.createElement(FieldControlContext.Provider, { value: [
+                {
+                    error: error,
+                    fullWidth: fullWidth,
+                    disabled: disabled,
+                    required: required,
+                    size: size,
+                    filled: filled,
+                    focused: focused,
+                    value: value
+                },
+                setState,
+            ] }, children)));
+});
+FieldControl.displayName = 'FieldControl';

package/__inner__/esm/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__/esm/components/FieldControl/FieldControlContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export var FieldControlContext = React.createContext([{}, function () { return undefined; }]);

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

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

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

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

package/__inner__/esm/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__/esm/components/FieldHint/FieldHint.js

@@ -1,13 +1,33 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import './FieldHint.css';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext, Children } from 'react';
 import { cn } from '../../utils/classname';
+import { FieldControlContext } from '../FieldControl';
+export var FIELD_HINT_DEFAULT_TAG = 'div';
 export var cnFieldHint = cn('FieldHint');
 export var FieldHint = forwardRef(function (_a, ref) {
-    var children = _a.children, error = _a.error, disabled = _a.disabled, size = _a.size, className = _a.className, other = __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 = __rest(_a, ["children", "error", "disabled", "size", "className"]);
+    var context = useContext(FieldControlContext);
+    var _b = __read(context, 1), fieldControl = _b[0];
+    var Tag = FIELD_HINT_DEFAULT_TAG;
+    var size = sizeProp;
+    var error = errorProp;
+    var disabled = disabledProp;
+    var childrenCount = Children.toArray(children).filter(function (element) { return element !== undefined; }).length;
+    if (!childrenCount) {
         return null;
     }
-    return (React.createElement("div", __assign({ className: 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.createElement(Tag, __assign({ className: cnFieldHint({ error: error, disabled: disabled, size: size }, [className]) }, other, { ref: ref }), children));
 });
 FieldHint.displayName = 'FieldHint';

package/__inner__/esm/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__/esm/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__/esm/components/FieldIcon/FieldIcon.js

@@ -1,24 +1,35 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import './FieldIcon.css';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { isValidElementType } from 'react-is';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { FieldControlContext } from '../FieldControl';
+export var FIELD_ICON_DEFAULT_TAG = 'div';
 export var cnFieldIcon = cn('FieldIcon');
 var resolveChildren = function (Content, size) {
     if (typeof Content === 'string') {
         return Content;
     }
     if (isValidElementType(Content)) {
-        return React.createElement(Content, { size: getIconSizeToFormElement(size) });
+        return React.createElement(Content, { size: size && getIconSizeToFormElement(size) });
     }
     return null;
 };
 export var FieldIcon = forwardRef(function (_a, ref) {
-    var icon = _a.icon, className = _a.className, size = _a.size, other = __rest(_a, ["icon", "className", "size"]);
+    var icon = _a.icon, className = _a.className, sizeProp = _a.size, other = __rest(_a, ["icon", "className", "size"]);
+    var context = useContext(FieldControlContext);
+    var _b = __read(context, 1), fieldControl = _b[0];
+    var Tag = FIELD_ICON_DEFAULT_TAG;
+    var size = sizeProp;
     if (!icon) {
         return null;
     }
-    return (React.createElement("div", __assign({ className: cnFieldIcon({ size: size }, [className]) }, other, { ref: ref }), resolveChildren(icon, size)));
+    if (fieldControl) {
+        if (size === undefined && fieldControl.size) {
+            size = fieldControl.size;
+        }
+    }
+    return (React.createElement(Tag, __assign({ className: cnFieldIcon({ size: size }, [className]) }, other, { ref: ref }), resolveChildren(icon, size)));
 });
 FieldIcon.displayName = 'FieldIcon';

package/__inner__/esm/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__/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';