@koslibs/components 1.3.0 → 1.5.0

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/colors.module.js

@@ -0,0 +1,5 @@
+import "./colors_module.css";
+const colors_module = {
+    component: "component-NzhSoV"
+};
+export default colors_module;

package/dist/components/Modal/colors_module.css

@@ -0,0 +1,10 @@
+.component-NzhSoV {
+  background-color: var(--modal-background-color);
+  color: var(--modal-color);
+
+  &::backdrop {
+    background-color: var(--modal-backdrop-color);
+    backdrop-filter: blur(var(--modal-backdrop-blur));
+  }
+}
+

package/dist/components/Modal/components/content/index.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+export type ContentProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -content.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+};
+export declare const Content: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -content.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+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 getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": getDataTestId('content'),
+        children: children
+    });
+});
+Content.displayName = 'ModalContent';
+export { Content };

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

@@ -0,0 +1,5 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-Xoedpj"
+};
+export default index_module;

package/dist/components/Modal/components/content/index_module.css

@@ -0,0 +1,12 @@
+.component-Xoedpj {
+  gap: var(--size-24, 24px);
+  min-height: 0;
+  padding: var(--modal-padding);
+  overscroll-behavior: contain;
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  flex: auto;
+  display: flex;
+  overflow: auto;
+}
+

package/dist/components/Modal/components/controls/index.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import React from 'react';
+export type ControlsProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Основное действие, отображается после дополнительного.
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительное действие.
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание действий.
+     * В строковых раскладках block-кнопки делят свободную ширину поровну.
+     * В column кнопки занимают всю ширину и располагаются друг под другом.
+     * @default 'end'
+     */
+    layout?: 'start' | 'end' | 'center' | 'space-between' | 'column';
+    /**
+     * Расстояние между действиями.
+     * @default 12
+     */
+    gap?: 8 | 12 | 16 | 24;
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -controls.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+};
+export declare const Controls: React.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Основное действие, отображается после дополнительного.
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительное действие.
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание действий.
+     * В строковых раскладках block-кнопки делят свободную ширину поровну.
+     * В column кнопки занимают всю ширину и располагаются друг под другом.
+     * @default 'end'
+     */
+    layout?: "start" | "end" | "center" | "space-between" | "column";
+    /**
+     * Расстояние между действиями.
+     * @default 12
+     */
+    gap?: 8 | 12 | 16 | 24;
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -controls.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,24 @@
+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 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": getDataTestId('controls'),
+        children: children ?? /*#__PURE__*/ jsxs(react.Fragment, {
+            children: [
+                secondary,
+                primary
+            ]
+        })
+    });
+});
+Controls.displayName = 'ModalControls';
+export { Controls };

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

@@ -0,0 +1,19 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-IPNCFT",
+    column: "column-dBeQXP",
+    start: "start-ouHlcU",
+    end: "end-TYAvEX",
+    center: "center-I4ALjs",
+    "space-between": "space-between-OxpVhA",
+    spaceBetween: "space-between-OxpVhA",
+    "gap-8": "gap-8-xwhlts",
+    gap8: "gap-8-xwhlts",
+    "gap-12": "gap-12-IFyQQK",
+    gap12: "gap-12-IFyQQK",
+    "gap-16": "gap-16-iZpxeN",
+    gap16: "gap-16-iZpxeN",
+    "gap-24": "gap-24-eEhuId",
+    gap24: "gap-24-eEhuId"
+};
+export default index_module;

package/dist/components/Modal/components/controls/index_module.css

@@ -0,0 +1,52 @@
+.component-IPNCFT {
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.component-IPNCFT:not(.column-dBeQXP) > button[data-block="true"] {
+  flex: 1 1 0;
+}
+
+.start-ouHlcU {
+  justify-content: flex-start;
+}
+
+.end-TYAvEX {
+  justify-content: flex-end;
+}
+
+.center-I4ALjs {
+  justify-content: center;
+}
+
+.space-between-OxpVhA {
+  justify-content: space-between;
+}
+
+.column-dBeQXP {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.column-dBeQXP > button {
+  width: 100%;
+}
+
+.gap-8-xwhlts {
+  gap: var(--size-8, 8px);
+}
+
+.gap-12-IFyQQK {
+  gap: var(--size-12, 12px);
+}
+
+.gap-16-iZpxeN {
+  gap: var(--size-16, 16px);
+}
+
+.gap-24-eEhuId {
+  gap: var(--size-24, 24px);
+}
+

package/dist/components/Modal/components/footer/index.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+export type FooterProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -footer.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+};
+export declare const Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -footer.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+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 getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": getDataTestId('footer'),
+        children: children
+    });
+});
+Footer.displayName = 'ModalFooter';
+export { Footer };

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

@@ -0,0 +1,5 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-ZDJl0C"
+};
+export default index_module;

package/dist/components/Modal/components/footer/index_module.css

@@ -0,0 +1,9 @@
+.component-ZDJl0C {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--size-12, 12px);
+  padding: 0 var(--modal-padding) var(--modal-padding);
+  flex-shrink: 0;
+  display: flex;
+}
+

package/dist/components/Modal/components/header/index.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes } from 'react';
+export type HeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onClose' | 'children'> & {
+    /**
+     * Заголовок окна.
+     */
+    title?: string;
+    /**
+     * Описание под заголовком.
+     */
+    subtitle?: string;
+    /**
+     * Показывать кнопку закрытия.
+     * Кнопка вызывает onClose ближайшего Modal.
+     * @default true
+     */
+    hasCloser?: boolean;
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -header.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+};
+export declare const Header: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onClose"> & {
+    /**
+     * Заголовок окна.
+     */
+    title?: string;
+    /**
+     * Описание под заголовком.
+     */
+    subtitle?: string;
+    /**
+     * Показывать кнопку закрытия.
+     * Кнопка вызывает onClose ближайшего Modal.
+     * @default true
+     */
+    hasCloser?: boolean;
+    /**
+     * Базовый идентификатор для автоматизированных тестов с суффиксом -header.
+     * По умолчанию наследуется от ближайшего Modal; явно заданный имеет приоритет.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,54 @@
+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 getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
+    const handleClick = ()=>{
+        onClose?.();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": getDataTestId('header'),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: index_module.content,
+                children: [
+                    Boolean(title) && /*#__PURE__*/ jsx(TypographyText, {
+                        size: 20,
+                        weight: "semibold",
+                        children: title
+                    }),
+                    Boolean(subtitle) && /*#__PURE__*/ jsx(TypographyText, {
+                        size: 14,
+                        color: "secondary",
+                        children: subtitle
+                    })
+                ]
+            }),
+            hasCloser && /*#__PURE__*/ jsx(Button, {
+                size: 32,
+                view: "transparent",
+                className: index_module.closer,
+                labelClassName: index_module.closerLabel,
+                "aria-label": "Закрыть окно",
+                onClick: handleClick,
+                children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                    width: 18,
+                    height: 18,
+                    "aria-hidden": "true"
+                })
+            })
+        ]
+    });
+});
+Header.displayName = 'ModalHeader';
+export { Header };

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

@@ -0,0 +1,8 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-sqEuYd",
+    content: "content-cnwKDB",
+    closer: "closer-odHjP5",
+    closerLabel: "closerLabel-r61y3R"
+};
+export default index_module;

package/dist/components/Modal/components/header/index_module.css

@@ -0,0 +1,31 @@
+.component-sqEuYd {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--size-24, 24px);
+  padding: var(--modal-padding) var(--modal-padding) 0;
+  flex-shrink: 0;
+  display: flex;
+}
+
+.content-cnwKDB {
+  gap: var(--size-4, 4px);
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.component-sqEuYd > .closer-odHjP5 {
+  flex-shrink: 0;
+  width: 48px;
+  min-width: 48px;
+  padding: 0;
+}
+
+.closerLabel-r61y3R {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

package/dist/components/Modal/components/modal-surface/index.d.ts

@@ -0,0 +1,4 @@
+import type { ModalProps } from '../../types.js';
+type SurfaceProps = Omit<ModalProps, 'open' | 'getPortalContainer'>;
+export declare const ModalSurface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<HTMLDialogElement>>;
+export {};

package/dist/components/Modal/components/modal-surface/index.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { ModalContext } from "../../context.js";
+import { lockScroll } from "../../utils/lock-scroll.js";
+import colors_module from "../../colors.module.js";
+import index_module from "../../index.module.js";
+const ModalSurface = /*#__PURE__*/ forwardRef(({ onClose, size = 720, escapeKeyDown = true, backdropClick = true, lockScroll: shouldLockScroll = true, className, dataTestId, children, onPointerDown, onClick, ...restProps }, ref)=>{
+    const dialogRef = useRef(null);
+    const backdropPointerDown = useRef(false);
+    const mounted = useRef(false);
+    const contextValue = useMemo(()=>({
+            onClose,
+            dataTestId
+        }), [
+        onClose,
+        dataTestId
+    ]);
+    const mergedRef = useCallback((element)=>{
+        dialogRef.current = element;
+        if ('function' == typeof ref) ref(element);
+        else if (ref) ref.current = element;
+    }, [
+        ref
+    ]);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+        mounted.current = true;
+        if (!dialog.open) dialog.showModal();
+        return ()=>{
+            mounted.current = false;
+            dialog.close();
+        };
+    }, []);
+    useLayoutEffect(()=>{
+        const dialog = dialogRef.current;
+        if (dialog && shouldLockScroll) return lockScroll(dialog.ownerDocument);
+    }, [
+        shouldLockScroll
+    ]);
+    const isBackdrop = (event)=>{
+        const bounds = event.currentTarget.getBoundingClientRect();
+        return event.target === event.currentTarget && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
+    };
+    const handleCancel = (event)=>{
+        event.stopPropagation();
+        event.preventDefault();
+        if (escapeKeyDown) onClose?.();
+    };
+    const handleClose = (event)=>{
+        event.stopPropagation();
+        if (mounted.current && !event.currentTarget.open) onClose?.();
+    };
+    const handlePointerDown = (event)=>{
+        onPointerDown?.(event);
+        backdropPointerDown.current = !event.defaultPrevented && isBackdrop(event);
+    };
+    const handleClick = (event)=>{
+        onClick?.(event);
+        const close = backdropPointerDown.current && isBackdrop(event);
+        backdropPointerDown.current = false;
+        if (backdropClick && close && !event.defaultPrevented) onClose?.();
+    };
+    return /*#__PURE__*/ jsx("dialog", {
+        ...restProps,
+        ref: mergedRef,
+        className: classnames(index_module.component, colors_module.component, index_module[`size-${size}`], className),
+        "data-test-id": dataTestId,
+        onCancel: handleCancel,
+        onClose: handleClose,
+        onPointerDown: handlePointerDown,
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsx(ModalContext.Provider, {
+            value: contextValue,
+            children: children
+        })
+    });
+});
+ModalSurface.displayName = 'ModalSurface';
+export { ModalSurface };