@koslibs/components 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @koslibs/components
 
+## 1.5.0
+
+### Minor Changes
+
+- [#6](https://github.com/koslibs/components/pull/6) [`360f774`](https://github.com/koslibs/components/commit/360f7746facda771d84165a16caeb6fe56abcc4a) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Input по дизайну Figma с view primary/secondary, размерами 40–72,
+  label внутри/снаружи, подсказками и ошибками, аддонами и очисткой.
+  Размер по умолчанию — 40.
+  Добавлен showValueLength для счётчика текущей длины и maxLength: внутри для inner,
+  снаружи рядом с label для outer. Поддержаны ввод, очистка и сброс формы.
+  Шрифт счётчика — 11 px; счётчик и label выровнены по базовой линии текста.
+  Сообщение ошибки заменяет hint; без hint отображается только красная рамка.
+  Поддержаны controlled/uncontrolled ввод, нативный ref и HTML-атрибуты,
+  disabled/readOnly и сброс формы. Добавлены Storybook и отдельный импорт.
+  Внутренний label поднимается при фокусе или заполнении поля; placeholder появляется
+  при фокусе, а после blur пустого поля label возвращается в центр.
+  Клики по отступам и декоративным аддонам фокусируют input, в том числе внутри
+  контейнеров с tabIndex; интерактивные аддоны сохраняют собственный фокус.
+  Формирование dataTestId частей Input и Modal унифицировано через общий внутренний
+  хук useDataTestId; существующие идентификаторы и наследование в Modal сохранены.
+  Убраны служебные ID сообщений и счётчика, автоматические aria-describedby и aria-invalid.
+  Обновлена зависимость @koslibs/icons до 1.2.0. В примерах Input используется
+  SearchIcon вместо локального SVG.
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './input.js';
+export type { InputProps } from './types.js';

package/dist/components/Input/index.js

@@ -0,0 +1 @@
+export { Input } from "./input.js";

package/dist/components/Input/index.module.js

@@ -0,0 +1,25 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-aUdiT5",
+    "size-40": "size-40-afh8b8",
+    size40: "size-40-afh8b8",
+    "size-48": "size-48-MxoUiI",
+    size48: "size-48-MxoUiI",
+    "size-56": "size-56-p4fx5c",
+    size56: "size-56-p4fx5c",
+    "size-64": "size-64-p9mwzX",
+    size64: "size-64-p9mwzX",
+    "size-72": "size-72-csDcgy",
+    size72: "size-72-csDcgy",
+    field: "field-MFnvYv",
+    input: "input-IlmcAi",
+    value: "value-ehhHJ8",
+    header: "header-bcofZJ",
+    innerHeader: "innerHeader-Iga0Hb",
+    counter: "counter-C758Bk",
+    label: "label-tvCOwp",
+    addon: "addon-OXeKuK",
+    clear: "clear-A5Krz8",
+    message: "message-ArUnJU"
+};
+export default index_module;

package/dist/components/Input/index_module.css

@@ -0,0 +1,312 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-aUdiT5 {
+  --field-background: var(--input-primary-background-color);
+  --field-border: var(--input-border-color);
+  --field-color: var(--input-color);
+  --field-label-color: var(--input-label-color);
+  --field-placeholder-color: var(--input-placeholder-color);
+  --field-icon-color: var(--input-icon-color);
+  gap: var(--input-gap);
+  width: var(--input-width);
+  vertical-align: top;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-primary);
+  color: var(--field-color);
+  flex-direction: column;
+  display: inline-flex;
+
+  &[data-block] {
+    width: 100%;
+    display: flex;
+  }
+
+  &[data-view="secondary"] {
+    --field-background: var(--input-secondary-background-color);
+  }
+
+  &[data-read-only] {
+    --field-border: var(--input-read-only-border-color);
+  }
+
+  &[data-error] {
+    --field-border: var(--input-error-border-color);
+  }
+
+  &[data-disabled] {
+    --field-background: var(--input-disabled-background-color);
+    --field-border: transparent;
+    --field-color: var(--input-disabled-color);
+    --field-label-color: var(--input-disabled-color);
+    --field-placeholder-color: var(--input-disabled-color);
+    --field-icon-color: var(--input-disabled-color);
+  }
+}
+
+.size-40-afh8b8 {
+  --field-height: 40px;
+  --field-padding: var(--input-padding-40);
+  --field-font-size: var(--input-font-size-40);
+  --field-line-height: 17px;
+}
+
+.size-48-MxoUiI {
+  --field-height: 48px;
+  --field-padding: var(--input-padding-48);
+  --field-font-size: var(--input-font-size-48);
+  --field-line-height: 17px;
+}
+
+.size-56-p4fx5c {
+  --field-height: 56px;
+  --field-padding: var(--input-padding-56);
+  --field-font-size: var(--input-font-size-56);
+  --field-line-height: 17px;
+}
+
+.size-64-p9mwzX {
+  --field-height: 64px;
+  --field-padding: var(--input-padding-64);
+  --field-font-size: var(--input-font-size-64);
+  --field-line-height: 17px;
+}
+
+.size-72-csDcgy {
+  --field-height: 72px;
+  --field-padding: var(--input-padding-72);
+  --field-font-size: var(--input-font-size-72);
+  --field-line-height: 20px;
+}
+
+.field-MFnvYv {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--input-gap);
+  width: 100%;
+  height: var(--field-height);
+  padding: 0 var(--field-padding);
+  border-radius: var(--input-border-radius);
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  cursor: text;
+  display: flex;
+}
+
+@media (hover: hover) {
+  .component-aUdiT5:not([data-disabled], [data-read-only], [data-error]) .field-MFnvYv:hover {
+    box-shadow: inset 0 0 0 1px var(--input-hover-border-color);
+  }
+}
+
+.component-aUdiT5:not([data-disabled]) .field-MFnvYv:focus-within {
+  box-shadow: none;
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
+.component-aUdiT5[data-error]:not([data-disabled]) .field-MFnvYv:focus-within {
+  outline-color: var(--input-error-border-color);
+}
+
+.component-aUdiT5[data-disabled] .field-MFnvYv, .input-IlmcAi:disabled {
+  cursor: not-allowed;
+}
+
+.value-ehhHJ8 {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  position: relative;
+}
+
+.header-bcofZJ {
+  align-items: baseline;
+  gap: var(--input-gap);
+  min-width: 0;
+  display: flex;
+}
+
+.innerHeader-Iga0Hb {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.component-aUdiT5 .counter-C758Bk {
+  color: var(--field-label-color);
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  margin-left: auto;
+  line-height: 16px;
+}
+
+.innerHeader-Iga0Hb .counter-C758Bk {
+  line-height: 15px;
+}
+
+.label-tvCOwp {
+  min-width: 0;
+  color: var(--field-label-color);
+  overflow-wrap: anywhere;
+  cursor: inherit;
+  flex: 1;
+  font-size: 13px;
+  line-height: 16px;
+  display: block;
+}
+
+.component-aUdiT5[data-inner-label] .label-tvCOwp {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
+  transition: transform .18s, font-size .18s, line-height .18s;
+  overflow: hidden;
+  transform: translateY(7.5px);
+
+  & > span {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
+.component-aUdiT5[data-inner-label][data-filled] .label-tvCOwp, .component-aUdiT5[data-inner-label]:not([data-disabled], [data-read-only]) .value-ehhHJ8:focus-within .label-tvCOwp {
+  font-size: 12px;
+  line-height: 15px;
+  transform: translateY(0);
+}
+
+.component-aUdiT5[data-inner-label] .value-ehhHJ8:has(.input-IlmcAi:autofill) .label-tvCOwp {
+  font-size: 12px;
+  line-height: 15px;
+  transform: translateY(0);
+}
+
+.component-aUdiT5[data-inner-label] .input-IlmcAi {
+  margin-top: 15px;
+
+  &::placeholder {
+    opacity: 0;
+    transition: opacity .18s;
+  }
+}
+
+.component-aUdiT5[data-inner-label]:not([data-disabled], [data-read-only]) .input-IlmcAi:focus::placeholder {
+  opacity: 1;
+}
+
+.component-aUdiT5[data-inner-counter]:not([data-inner-label]) .input-IlmcAi {
+  margin-top: 15px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .component-aUdiT5[data-inner-label] .label-tvCOwp, .component-aUdiT5[data-inner-label] .input-IlmcAi::placeholder {
+    transition: none;
+  }
+}
+
+.input-IlmcAi {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: var(--field-line-height);
+  color: var(--field-color);
+  font-family: var(--font-primary);
+  font-size: var(--field-font-size);
+  font-weight: 400;
+  line-height: var(--field-line-height);
+  text-overflow: ellipsis;
+  appearance: none;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+
+  &:focus {
+    text-overflow: clip;
+  }
+
+  &::placeholder {
+    color: var(--field-placeholder-color);
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 1;
+    -webkit-text-fill-color: var(--field-color);
+  }
+
+  &:-webkit-autofill {
+    -webkit-text-fill-color: var(--field-color);
+    box-shadow: inset 0 0 0 1000px var(--field-background);
+  }
+
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  &::-webkit-search-decoration {
+    appearance: none;
+  }
+}
+
+.addon-OXeKuK {
+  align-items: center;
+  gap: var(--input-gap);
+  color: var(--field-icon-color);
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
+  flex-shrink: 0;
+  display: flex;
+}
+
+.component-aUdiT5 .clear-A5Krz8 {
+  width: 24px;
+  min-width: 0;
+  height: 24px;
+  min-height: 0;
+  color: var(--field-icon-color);
+  background: none;
+  flex: 0 0 24px;
+  margin: 0 -4px;
+  padding: 0;
+
+  &:hover, &:active {
+    color: var(--field-icon-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-focus-border-color);
+    outline-offset: 2px;
+  }
+
+  & svg {
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+    display: block;
+  }
+}
+
+.component-aUdiT5 .message-ArUnJU {
+  color: var(--input-hint-color);
+  overflow-wrap: anywhere;
+  line-height: 15px;
+}
+
+.component-aUdiT5[data-error] .message-ArUnJU {
+  color: var(--input-error-message-color);
+}
+
+.component-aUdiT5[data-disabled] .message-ArUnJU {
+  color: var(--input-disabled-color);
+}
+

package/dist/components/Input/input.d.ts

@@ -0,0 +1,29 @@
+import { type ChangeEvent, type MouseEvent } from 'react';
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "children" | "onChange" | "maxLength"> & {
+    value?: string;
+    defaultValue?: string;
+    maxLength?: number;
+    showValueLength?: boolean;
+    view?: "primary" | "secondary";
+    size?: 40 | 48 | 56 | 64 | 72;
+    block?: boolean;
+    label?: import("react").ReactNode;
+    labelView?: "outer" | "inner";
+    hint?: import("react").ReactNode;
+    error?: import("react").ReactNode | boolean;
+    leftAddon?: import("react").ReactNode;
+    rightAddon?: import("react").ReactNode;
+    clear?: boolean;
+    clearLabel?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    style?: import("react").CSSProperties;
+    fieldClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    messageClassName?: string;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/input.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
+import classnames from "classnames";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Button } from "../Button/index.js";
+import { TypographyText } from "../Typography/text.js";
+import index_module from "./index.module.js";
+const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = false, label, labelView = 'outer', hint, error, leftAddon, rightAddon, clear = false, clearLabel = 'Очистить поле', value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, type = 'text', id, className, style, fieldClassName, inputClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const inputRef = useRef(null);
+    const [uncontrolledLength, setUncontrolledLength] = useState(defaultValue?.length ?? 0);
+    const controlled = void 0 !== value;
+    const valueLength = controlled ? value.length : uncontrolledLength;
+    const hasValue = valueLength > 0;
+    const showCounter = showValueLength && void 0 !== maxLength && Number.isInteger(maxLength) && maxLength >= 0;
+    const hasLabel = null != label && false !== label && '' !== label;
+    const hasError = Boolean(error);
+    const errorMessage = hint && 'boolean' != typeof error ? error : void 0;
+    const message = errorMessage || hint;
+    const hasMessage = Boolean(message);
+    const showClear = clear && hasValue && !disabled && !readOnly;
+    const getDataTestId = useDataTestId(dataTestId);
+    useImperativeHandle(ref, ()=>inputRef.current, []);
+    useEffect(()=>{
+        const input = inputRef.current;
+        const form = input?.form;
+        let active = true;
+        const handleReset = (event)=>{
+            queueMicrotask(()=>{
+                if (active && !event.defaultPrevented) setUncontrolledLength(input?.value.length ?? 0);
+            });
+        };
+        form?.addEventListener('reset', handleReset);
+        return ()=>{
+            active = false;
+            form?.removeEventListener('reset', handleReset);
+        };
+    }, [
+        restProps.form
+    ]);
+    const handleChange = (event)=>{
+        const nextValue = event.target.value;
+        if (!controlled) setUncontrolledLength(nextValue.length);
+        onChange?.(event, {
+            value: nextValue
+        });
+    };
+    const handleClear = (event)=>{
+        const input = inputRef.current;
+        if (!input || !showClear) return;
+        if (!controlled) {
+            input.value = '';
+            setUncontrolledLength(0);
+        }
+        onClear?.(event);
+        input.focus();
+    };
+    const handleFieldClick = (event)=>{
+        if (disabled || event.defaultPrevented || !(event.target instanceof Element)) return;
+        const interactiveTarget = event.target.closest('input, button, a, label, select, textarea, [role="button"], [contenteditable], [tabindex]');
+        if (interactiveTarget && event.currentTarget.contains(interactiveTarget)) return;
+        inputRef.current?.focus();
+    };
+    const labelElement = hasLabel && /*#__PURE__*/ jsx("label", {
+        htmlFor: inputId,
+        className: classnames(index_module.label, labelClassName),
+        "data-test-id": getDataTestId('label'),
+        children: /*#__PURE__*/ jsx(TypographyText, {
+            size: 'inner' === labelView ? 12 : 13,
+            weight: 'inner' === labelView ? 'regular' : 'medium',
+            children: label
+        })
+    });
+    const counterElement = showCounter && /*#__PURE__*/ jsxs(TypographyText, {
+        tag: "span",
+        size: 11,
+        className: index_module.counter,
+        style: {
+            minWidth: `${2 * String(maxLength).length + 1}ch`
+        },
+        dataTestId: getDataTestId('counter'),
+        children: [
+            valueLength,
+            "/",
+            maxLength
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames(index_module.component, index_module[`size-${size}`], className),
+        style: style,
+        "data-view": view,
+        "data-block": block || void 0,
+        "data-disabled": disabled || void 0,
+        "data-read-only": readOnly || void 0,
+        "data-error": hasError || void 0,
+        "data-label-view": labelView,
+        "data-inner-label": 'inner' === labelView && hasLabel || void 0,
+        "data-inner-counter": 'inner' === labelView && showCounter || void 0,
+        "data-filled": hasValue || void 0,
+        "data-test-id": getDataTestId('form-control'),
+        children: [
+            'outer' === labelView && (hasLabel || showCounter) && /*#__PURE__*/ jsxs("div", {
+                className: index_module.header,
+                children: [
+                    labelElement,
+                    counterElement
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames(index_module.field, fieldClassName),
+                onClick: handleFieldClick,
+                "data-test-id": getDataTestId('field'),
+                children: [
+                    leftAddon && /*#__PURE__*/ jsx("div", {
+                        className: index_module.addon,
+                        "data-test-id": getDataTestId('left-addon'),
+                        children: leftAddon
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: index_module.value,
+                        children: [
+                            'inner' === labelView && (hasLabel || showCounter) && /*#__PURE__*/ jsxs("div", {
+                                className: classnames(index_module.header, index_module.innerHeader),
+                                children: [
+                                    labelElement,
+                                    counterElement
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("input", {
+                                ...restProps,
+                                ref: inputRef,
+                                id: inputId,
+                                type: type,
+                                value: value,
+                                defaultValue: defaultValue,
+                                maxLength: maxLength,
+                                disabled: disabled,
+                                readOnly: readOnly,
+                                onChange: handleChange,
+                                className: classnames(index_module.input, inputClassName),
+                                "data-test-id": dataTestId
+                            })
+                        ]
+                    }),
+                    showClear && /*#__PURE__*/ jsx(Button, {
+                        view: "text",
+                        size: 32,
+                        className: index_module.clear,
+                        "aria-label": clearLabel,
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onClick: handleClear,
+                        dataTestId: getDataTestId('clear'),
+                        children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                            width: 16,
+                            height: 16,
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    rightAddon && /*#__PURE__*/ jsx("div", {
+                        className: index_module.addon,
+                        "data-test-id": getDataTestId('right-addon'),
+                        children: rightAddon
+                    })
+                ]
+            }),
+            hasMessage && /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 12,
+                className: classnames(index_module.message, messageClassName),
+                dataTestId: getDataTestId(errorMessage ? 'error' : 'hint'),
+                children: message
+            })
+        ]
+    });
+});
+Input.displayName = 'Input';
+export { Input };

package/dist/components/Input/types.d.ts

@@ -0,0 +1,115 @@
+import type { ChangeEvent, CSSProperties, InputHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'maxLength' | 'onChange' | 'children'> & {
+    /**
+     * Значение управляемого поля.
+     */
+    value?: string;
+    /**
+     * Начальное значение неуправляемого поля.
+     */
+    defaultValue?: string;
+    /**
+     * Максимальная длина ввода. Передаётся в нативный maxLength.
+     * Длина считается в кодовых единицах UTF-16, как в HTML input.
+     */
+    maxLength?: number;
+    /**
+     * Показывает текущую длину и maxLength, например 13/64.
+     * Работает только при заданном неотрицательном целом maxLength.
+     * При inner расположен внутри поля, при outer — рядом с внешним label.
+     * @default false
+     */
+    showValueLength?: boolean;
+    /**
+     * Вид поля: белый primary или светлый secondary.
+     * @default 'primary'
+     */
+    view?: 'primary' | 'secondary';
+    /**
+     * Высота поля в пикселях без внешнего label и сообщения.
+     * @default 40
+     */
+    size?: 40 | 48 | 56 | 64 | 72;
+    /**
+     * Растягивает компонент на ширину контейнера.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Название поля. Связывается с input через htmlFor и id.
+     */
+    label?: ReactNode;
+    /**
+     * Положение label: снаружи или внутри поля.
+     * Внутренний label поднимается при фокусе или заполнении поля.
+     * @default 'outer'
+     */
+    labelView?: 'outer' | 'inner';
+    /**
+     * Подсказка под полем. При наличии сообщения об ошибке заменяется им.
+     */
+    hint?: ReactNode;
+    /**
+     * Сообщение об ошибке или true для состояния ошибки без сообщения.
+     * Сообщение заменяет hint; без hint отображается только состояние ошибки.
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Аддон слева от значения, например иконка поиска.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Аддон справа от значения, например единица измерения или кнопка.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Показывает кнопку очистки заполненного поля. Скрыта в disabled и readOnly.
+     * @default false
+     */
+    clear?: boolean;
+    /**
+     * Доступное имя кнопки очистки.
+     * @default 'Очистить поле'
+     */
+    clearLabel?: string;
+    /**
+     * Обработчик ввода с нативным событием React и текущим значением.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик очистки. Не вызывает onChange.
+     * Для управляемого поля обновите value в этом обработчике.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Класс обёртки компонента.
+     */
+    className?: string;
+    /**
+     * Стили обёртки компонента, включая ширину и CSS-переменные.
+     */
+    style?: CSSProperties;
+    /**
+     * Класс визуального поля с аддонами.
+     */
+    fieldClassName?: string;
+    /**
+     * Класс нативного input.
+     */
+    inputClassName?: string;
+    /**
+     * Класс label.
+     */
+    labelClassName?: string;
+    /**
+     * Класс подсказки или сообщения об ошибке.
+     */
+    messageClassName?: string;
+    /**
+     * Идентификатор нативного input. Части получают суффиксы -form-control,
+     * -field, -label, -hint, -error, -left-addon, -right-addon, -clear и -counter.
+     */
+    dataTestId?: string;
+};

package/dist/components/Input/vars.css

@@ -0,0 +1,32 @@
+:root {
+  --input-primary-background-color: #fff;
+  --input-secondary-background-color: #f5f3ec;
+  --input-color: #1c1a18;
+  --input-placeholder-color: #736554;
+  --input-label-color: #736554;
+  --input-hint-color: #736554;
+  --input-icon-color: #736554;
+  --input-border-color: transparent;
+  --input-hover-border-color: #c8beaa;
+  --input-focus-border-color: #d95300;
+  --input-error-border-color: #ef5350;
+  --input-error-message-color: #b42318;
+  --input-disabled-background-color: #cfd1cb;
+  --input-disabled-color: #858981;
+  --input-read-only-border-color: #c8beaa;
+  --input-border-radius: 8px;
+  --input-gap: 8px;
+  --input-icon-size: 16px;
+  --input-width: 320px;
+  --input-font-size-40: 13px;
+  --input-font-size-48: 13px;
+  --input-font-size-56: 14px;
+  --input-font-size-64: 14px;
+  --input-font-size-72: 16px;
+  --input-padding-40: 12px;
+  --input-padding-48: 12px;
+  --input-padding-56: 16px;
+  --input-padding-64: 16px;
+  --input-padding-72: 20px;
+}
+

package/dist/components/Modal/components/content/index.js

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Content = /*#__PURE__*/ forwardRef(({ children, className, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
-        "data-test-id": testId ? `${testId}-content` : void 0,
+        "data-test-id": getDataTestId('content'),
         children: children
     });
 });

package/dist/components/Modal/components/controls/index.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import react, { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Controls = /*#__PURE__*/ forwardRef(({ primary, secondary, layout = 'end', gap = 12, className, children, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, index_module[layout], index_module[`gap-${gap}`], className),
-        "data-test-id": testId ? `${testId}-controls` : void 0,
+        "data-test-id": getDataTestId('controls'),
         children: children ?? /*#__PURE__*/ jsxs(react.Fragment, {
             children: [
                 secondary,

package/dist/components/Modal/components/footer/index.js

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Footer = /*#__PURE__*/ forwardRef(({ children, className, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
-        "data-test-id": testId ? `${testId}-footer` : void 0,
+        "data-test-id": getDataTestId('footer'),
         children: children
     });
 });

package/dist/components/Modal/components/header/index.js

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { Button } from "../../../Button/index.js";
 import { TypographyText } from "../../../Typography/index.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Header = /*#__PURE__*/ forwardRef(({ title, subtitle, hasCloser = true, className, dataTestId, ...restProps }, ref)=>{
     const { onClose, dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     const handleClick = ()=>{
         onClose?.();
     };
@@ -16,7 +17,7 @@ const Header = /*#__PURE__*/ forwardRef(({ title, subtitle, hasCloser = true, cl
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
-        "data-test-id": testId ? `${testId}-header` : void 0,
+        "data-test-id": getDataTestId('header'),
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: index_module.content,

package/dist/hooks/use-data-test-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Создаёт идентификаторы частей компонента с суффиксом.
+ * Без базового dataTestId или при пустой строке возвращает undefined.
+ */
+export declare function useDataTestId(dataTestId?: string): (suffix: string) => string | undefined;

package/dist/hooks/use-data-test-id.js

@@ -0,0 +1,7 @@
+import { useCallback } from "react";
+function useDataTestId(dataTestId) {
+    return useCallback((suffix)=>dataTestId ? `${dataTestId}-${suffix}` : void 0, [
+        dataTestId
+    ]);
+}
+export { useDataTestId };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
+export { Input } from './components/Input/index.js';
+export type { InputProps } from './components/Input/index.js';
 export { Spinner } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
 export { Typography, TypographyText, TypographyTitle, Text, Title } from './components/Typography/index.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Button } from "./components/Button/index.js";
+export { Input } from "./components/Input/index.js";
 export { Spinner } from "./components/Spinner/index.js";
 export { Text, Title, Typography, TypographyText, TypographyTitle } from "./components/Typography/index.js";
 export { Popover } from "./components/Popover/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",
@@ -80,7 +80,7 @@
         "react-dom": "^18.3.1 || ^19.0.0"
     },
     "dependencies": {
-        "@koslibs/icons": "1.0.1",
+        "@koslibs/icons": "1.2.0",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1"
     }