@koslibs/components 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @koslibs/components
 
+## 1.6.0
+
+### Minor Changes
+
+- [#7](https://github.com/koslibs/components/pull/7) [`4e937d7`](https://github.com/koslibs/components/commit/4e937d7e18b3c7d592e3b8cb161817d482bf2c55) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Textarea по документации Figma: primary/secondary, inner/outer label,
+  Typography, hint/error, счётчик длины, очистка, autosize и вертикальный resize.
+  Внутренний скроллбар оформлен без стрелок и фона, с тонким закруглённым ползунком.
+
+## 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 };