@ozen-ui/kit 0.8.0 → 0.9.1

package/__inner__/cjs/components/FieldLabel/FieldLabel.js

@@ -1,20 +1,50 @@
 "use strict";
 exports.__esModule = true;
-exports.FieldLabel = exports.cnFieldLabel = exports.fieldLabelSizeVariant = void 0;
+exports.FieldLabel = exports.cnFieldLabel = exports.FIELD_LABEL_DEFAULT_TAG = void 0;
 var tslib_1 = require("tslib");
-var react_1 = require("react");
-var React = tslib_1.__importStar(require("react"));
-var classname_1 = require("../../utils/classname");
 require("./FieldLabel.css");
-exports.fieldLabelSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
+var react_1 = tslib_1.__importStar(require("react"));
+var useIsomorphicEffect_1 = require("../../hooks/useIsomorphicEffect");
+var classname_1 = require("../../utils/classname");
+var FieldControl_1 = require("../FieldControl");
+exports.FIELD_LABEL_DEFAULT_TAG = 'span';
 exports.cnFieldLabel = (0, classname_1.cn)('FieldLabel');
 exports.FieldLabel = (0, react_1.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: (0, exports.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 = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _b = tslib_1.__read(context, 2), fieldControl = _b[0], setFieldControl = _b[1];
+    var Tag = exports.FIELD_LABEL_DEFAULT_TAG;
+    var size = sizeProp;
+    var required = requiredProp;
+    var disabled = disabledProp;
+    var focused = focusedProp;
+    var filled = filledProp;
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        setFieldControl(function (prevState) { return (tslib_1.__assign(tslib_1.__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_1["default"].createElement(Tag, { className: (0, exports.cnFieldLabel)({ filled: filled, shrink: shrink, focused: focused, disabled: disabled, size: size, required: required }, [className]), ref: ref },
         children,
         " ",
-        required && React.createElement("sup", null, "*")));
+        required && react_1["default"].createElement("sup", null, "*")));
 });
 exports.FieldLabel.displayName = 'FieldLabel';

package/__inner__/cjs/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__/cjs/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__/cjs/components/Fieldset/Fieldset.js

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+exports.Fieldset = exports.cnFieldset = exports.FIELDSET_DEFAULT_TAG = void 0;
+var tslib_1 = require("tslib");
+require("./Fieldset.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../utils/classname");
+exports.FIELDSET_DEFAULT_TAG = 'fieldset';
+exports.cnFieldset = (0, classname_1.cn)('Fieldset');
+exports.Fieldset = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, other = tslib_1.__rest(_a, ["className"]);
+    var Tag = exports.FIELDSET_DEFAULT_TAG;
+    return react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldset)({}, [className]) }, other, { ref: ref }));
+});
+exports.Fieldset.displayName = 'Fieldset';

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

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

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

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

package/__inner__/cjs/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__/cjs/components/FilePicker/FilePicker.js

@@ -12,6 +12,7 @@ var isKey_1 = require("../../utils/isKey");
 var FieldHint_1 = require("../FieldHint");
 var FieldIcon_1 = require("../FieldIcon");
 var FieldLabel_1 = require("../FieldLabel");
+var Fieldset_1 = require("../Fieldset");
 var IconButton_1 = require("../IconButton");
 var constants_1 = require("./constants");
 exports.cnFilePicker = (0, classname_1.cn)('FilePicker');
@@ -72,7 +73,7 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
                 (fileList === null || fileList === void 0 ? void 0 : fileList.length) ? (react_1["default"].createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1["default"].createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
             !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && onClearProp && (react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, variant: "function", "aria-label": clearText, ref: clearRef, onClick: onClear, size: size, icon: icons_1.CloseIcon })),
             react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnFilePicker)('RenderRight'), icon: renderRight, size: size }),
-            react_1["default"].createElement("fieldset", { className: (0, exports.cnFilePicker)('Fieldset') })),
+            react_1["default"].createElement(Fieldset_1.Fieldset, { className: (0, exports.cnFilePicker)('Fieldset') })),
         react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 exports.FilePicker.displayName = 'FilePicker';

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