@consta/uikit 3.24.4 → 3.26.0

package/__internal__/src/components/TextField/TextField.js

@@ -0,0 +1,170 @@
+import { __assign, __read, __rest } from "tslib";
+import './TextField.css';
+import React, { forwardRef, useCallback, useEffect } from 'react';
+import TextAreaAutoSize from 'react-textarea-autosize';
+import { useFlag } from '../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
+import { useMutableRef } from '../../hooks/useMutableRef/useMutableRef';
+import { useSortSteps } from '../../hooks/useSortSteps/useSortSteps';
+import { IconClose } from '../../icons/IconClose/IconClose';
+import { IconEye } from '../../icons/IconEye/IconEye';
+import { IconEyeClose } from '../../icons/IconEyeClose/IconEyeClose';
+import { IconSelect } from '../../icons/IconSelect/IconSelect';
+import { IconSelectOpen } from '../../icons/IconSelectOpen/IconSelectOpen';
+import { cn } from '../../utils/bem';
+import { getByMap } from '../../utils/getByMap';
+import { isString } from '../../utils/type-guards';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
+import { FieldCaption } from '../FieldCaption/FieldCaption';
+import { FieldLabel } from '../FieldLabel/FieldLabel';
+import { getIncrementFlag, getTypeForRender, getValueByStep, sizeMap } from './helpers';
+import { textFieldPropFormDefault, textFieldPropSizeDefault, textFieldPropViewDefault, textFieldPropWidthDefault, } from './types';
+export var COMPONENT_NAME = 'TextField';
+export var cnTextField = cn(COMPONENT_NAME);
+export function TextFieldRender(props, ref) {
+    var textFieldRef = React.useRef(null);
+    var inputRef = React.useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRefProp = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, withClearButton = _a.withClearButton, _h = _a.incrementButtons, incrementButtons = _h === void 0 ? true : _h, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, _j = _a.step, step = _j === void 0 ? 1 : _j, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, inputContainerRef = _a.inputContainerRef, _k = _a.labelPosition, labelPosition = _k === void 0 ? 'top' : _k, caption = _a.caption, iconSizeProp = _a.iconSize, focused = _a.focused, onClick = _a.onClick, 
+    // onkey props
+    onKeyDownProp = _a.onKeyDown, onKeyDownCapture = _a.onKeyDownCapture, onKeyPress = _a.onKeyPress, onKeyPressCapture = _a.onKeyPressCapture, onKeyUp = _a.onKeyUp, onKeyUpCapture = _a.onKeyUpCapture, otherProps = __rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "withClearButton", "incrementButtons", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "inputContainerRef", "labelPosition", "caption", "iconSize", "focused", "onClick", "onKeyDown", "onKeyDownCapture", "onKeyPress", "onKeyPressCapture", "onKeyUp", "onKeyUpCapture"]);
+    var _l = __read(useFlag(autoFocus), 2), focus = _l[0], setFocus = _l[1];
+    var _m = __read(useFlag(false), 2), passwordVisible = _m[0], setPasswordVisuble = _m[1];
+    var valueRef = useMutableRef(value);
+    var onClickRef = useMutableRef(onClick);
+    var onChangeRef = useMutableRef(onChange);
+    var handleEyeClick = useCallback(function (e) {
+        var _a;
+        e.stopPropagation();
+        setPasswordVisuble.toogle();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    var textarea = type === 'textarea';
+    var LeftIcon = leftSide;
+    var RightIcon = rightSide;
+    var leftSideIsString = isString(leftSide);
+    var rightSideIsString = isString(rightSide);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
+    var sortedSteps = useSortSteps({ step: step, min: Number(min), max: Number(max) });
+    var handleChange = useCallback(function (e) {
+        var _a;
+        !disabled && ((_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, { e: e, id: id, name: name, value: e.target.value || null }));
+    }, [id, name, disabled]);
+    var handleBlur = function (e) {
+        setFocus.off();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    };
+    var handleFocus = function (e) {
+        setFocus.on();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    var commonProps = {
+        'className': cnTextField('Input'),
+        'value': value || '',
+        'onChange': handleChange,
+        maxLength: maxLength,
+        disabled: disabled,
+        'onBlur': handleBlur,
+        'onFocus': handleFocus,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        autoComplete: autoComplete,
+        readOnly: readOnly,
+        tabIndex: tabIndex,
+        name: name,
+        onKeyDownCapture: onKeyDownCapture,
+        onKeyPress: onKeyPress,
+        onKeyPressCapture: onKeyPressCapture,
+        onKeyUp: onKeyUp,
+        onKeyUpCapture: onKeyUpCapture,
+        'id': id ? id.toString() : '',
+        'aria-label': ariaLabel
+    };
+    var Eye = passwordVisible ? IconEyeClose : IconEye;
+    var onKeyDown = function (e) {
+        var flag = getIncrementFlag(e);
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+        if (type === 'number' && typeof flag === 'boolean' && !disabled) {
+            e.preventDefault();
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                e: e,
+                value: getValueByStep(sortedSteps, value, flag, min, max)
+            });
+        }
+    };
+    var textareaProps = {
+        rows: rows,
+        cols: cols,
+        minRows: minRows || rows,
+        maxRows: maxRows || rows,
+        ref: useForkRef([inputRef, inputRefProp])
+    };
+    var inputProps = {
+        type: getTypeForRender(type, passwordVisible),
+        max: max,
+        min: min,
+        step: !Array.isArray(sortedSteps) ? sortedSteps : 0,
+        onKeyDown: onKeyDown,
+        ref: useForkRef([inputRef, inputRefProp])
+    };
+    var handleClear = useCallback(function (e) {
+        var _a;
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
+            e: e,
+            value: null
+        });
+    }, []);
+    var changeNumberValue = function (e, isIncrement) {
+        if (isIncrement === void 0) { isIncrement = true; }
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            e: e,
+            value: getValueByStep(sortedSteps, value, isIncrement, min, max)
+        });
+    };
+    var rootProps = {
+        onClick: useCallback(function (e) {
+            var _a, _b;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = onClickRef.current) === null || _b === void 0 ? void 0 : _b.call(onClickRef, e);
+        }, [])
+    };
+    // при смене passwordVible, перемещаем курсор в конец строки
+    useEffect(function () {
+        var _a;
+        if (type === 'password' && inputRef.current) {
+            inputRef.current.selectionStart = ((_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        }
+    }, [passwordVisible]);
+    return (React.createElement("div", __assign({ className: cnTextField({ labelPosition: labelPosition, size: size, view: view, width: width }, [className]), ref: useForkRef([ref, textFieldRef]) }, rootProps, otherProps),
+        label && (React.createElement(FieldLabel, { required: required, className: cnTextField('Label', { labelPosition: labelPosition }), size: size }, label)),
+        React.createElement("div", { className: cnTextField('Body') },
+            React.createElement("div", { ref: inputContainerRef, className: cnTextField('InputContainer', {
+                    view: view,
+                    form: form,
+                    status: status || state,
+                    disabled: disabled,
+                    type: type,
+                    focus: focus || focused,
+                    withValue: !!value
+                }) },
+                LeftIcon && (React.createElement("div", { className: cnTextField('Side', {
+                        position: 'left',
+                        type: leftSideIsString ? 'string' : 'icon'
+                    }), title: typeof leftSide === 'string' ? leftSide : undefined }, leftSideIsString ? (leftSide) : (React.createElement(LeftIcon, { className: cnTextField('Icon'), size: iconSize })))),
+                textarea ? (React.createElement(TextAreaAutoSize, __assign({}, commonProps, textareaProps))) : (React.createElement("input", __assign({}, commonProps, inputProps))),
+                type === 'number' && incrementButtons && (React.createElement("div", { className: cnTextField('Counter') },
+                    React.createElement("button", { onFocus: handleFocus, onClick: function (e) { return changeNumberValue(e, true); }, type: "button", className: cnTextField('CounterButton') },
+                        React.createElement(IconSelectOpen, { size: "xs" })),
+                    React.createElement("button", { onFocus: handleFocus, onClick: function (e) { return changeNumberValue(e, false); }, type: "button", className: cnTextField('CounterButton') },
+                        React.createElement(IconSelect, { size: "xs" })))),
+                value && withClearButton && type !== 'number' && (React.createElement("button", { type: "button", disabled: disabled, onClick: handleClear, className: cnTextField('ClearButton') },
+                    React.createElement(IconClose, { size: "xs", className: cnTextField('ClearButtonIcon') }))),
+                type === 'password' && value && (React.createElement("button", { className: cnTextField('ClearButton'), type: "button", onClick: handleEyeClick },
+                    React.createElement(Eye, { className: cnTextField('Icon'), size: iconSize }))),
+                RightIcon && type !== 'number' && type !== 'password' && (React.createElement("div", { className: cnTextField('Side', {
+                        position: 'right',
+                        type: rightSideIsString ? 'string' : 'icon'
+                    }), title: typeof rightSide === 'string' ? rightSide : undefined }, rightSideIsString ? (rightSide) : (React.createElement(RightIcon, { className: cnTextField('Icon'), size: iconSize }))))),
+            caption && (React.createElement(FieldCaption, { className: cnTextField('Caption'), status: status || state }, caption)))));
+}
+export var TextField = forwardRef(TextFieldRender);
+export * from './types';

package/__internal__/src/components/TextField/helpers.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconPropSize } from '../../icons/Icon/Icon';
+import { TextFieldPropSize } from './types';
+export declare const sizeMap: Record<TextFieldPropSize, IconPropSize>;
+export declare const getValueByStepArray: (steps: number[], value: string | null | undefined, min: number | string | undefined, max: number | string | undefined, isIncrement: boolean) => number;
+export declare const getValueByStepNumber: (step: number | string, value: string | null | undefined, min: number | string | undefined, max: number | string | undefined, isIncrement: boolean) => number;
+export declare const getIncrementFlag: (event: React.KeyboardEvent) => boolean | null;
+export declare const getTypeForRender: (type: string, passwordVible: boolean) => string;
+export declare const getValueByStep: (steps: number | number[], value: string | null | undefined, isIncrement: boolean, min?: string | number | undefined, max?: string | number | undefined) => string;

package/__internal__/src/components/TextField/helpers.js

@@ -0,0 +1,69 @@
+export var sizeMap = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 'm'
+};
+export var getValueByStepArray = function (steps, value, min, max, isIncrement) {
+    var currentValue = Number(value !== null && value !== void 0 ? value : min);
+    var minValue = Number(min);
+    if (typeof value !== 'string') {
+        return typeof min !== 'undefined' ? minValue : 0;
+    }
+    if (currentValue < steps[0]) {
+        return steps[0];
+    }
+    if (currentValue > steps[steps.length - 1]) {
+        return steps[steps.length - 1];
+    }
+    if ((!isIncrement && currentValue === steps[0]) ||
+        (isIncrement && currentValue === steps[steps.length - 1])) {
+        return currentValue;
+    }
+    for (var i = 0; i < steps.length; i++) {
+        if (currentValue === steps[i] || (steps[i] < currentValue && steps[i + 1] > currentValue)) {
+            return steps[i + (isIncrement ? 1 : -1)];
+        }
+    }
+    return 0;
+};
+export var getValueByStepNumber = function (step, value, min, max, isIncrement) {
+    var _a;
+    var minValue = Number(min);
+    var maxValue = Number(max);
+    var currentValue = (typeof value === 'string' ? Number(value) : 0) + Number(step) * (isIncrement ? 1 : -1);
+    if (!Number.isNaN(minValue) && currentValue <= minValue) {
+        return minValue;
+    }
+    if (!Number.isNaN(maxValue) && currentValue >= maxValue) {
+        return maxValue;
+    }
+    return Number(currentValue.toFixed(Number((_a = 
+    /* Необходимо для того, чтобы избежать ситуации, когда по нажатию
+на кнопку прибавляется число с погрешностью.
+Здесь мы берем разрядность дробной части шага и ограничиваем
+результирующее число этой разрядностью */
+    Number(step)
+        .toString()
+        .split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0));
+};
+export var getIncrementFlag = function (event) {
+    if ((event === null || event === void 0 ? void 0 : event.key) !== 'ArrowUp' && (event === null || event === void 0 ? void 0 : event.key) !== 'ArrowDown') {
+        return null;
+    }
+    return (event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp';
+};
+export var getTypeForRender = function (type, passwordVible) {
+    if (type !== 'password') {
+        return type;
+    }
+    if (passwordVible) {
+        return 'text';
+    }
+    return 'password';
+};
+export var getValueByStep = function (steps, value, isIncrement, min, max) {
+    return (Array.isArray(steps)
+        ? getValueByStepArray(steps, value, min, max, isIncrement)
+        : getValueByStepNumber(steps, value, min, max, isIncrement)).toString();
+};

package/__internal__/src/components/TextField/types.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
+import { AutoCompete } from '../../utils/types/AutoComplete';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
+export declare type TextFieldPropValue = string | null;
+export declare type TextFieldPropName = string;
+export declare type TextFieldPropId = string | number;
+export declare const textFieldPropSize: readonly ["m", "xs", "s", "l"];
+export declare type TextFieldPropSize = typeof textFieldPropSize[number];
+export declare const textFieldPropSizeDefault: TextFieldPropSize;
+export declare type TextFieldPropOnChange = (args: TextFieldOnChangeArguments) => void;
+export declare type TextFieldOnChangeArguments = {
+    e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;
+    id?: TextFieldPropId;
+    name?: TextFieldPropName;
+    value: TextFieldPropValue;
+};
+export declare const textFieldPropView: readonly ["default", "clear"];
+export declare type TextFieldPropView = typeof textFieldPropView[number];
+export declare const textFieldPropViewDefault: TextFieldPropView;
+export declare const textFieldPropForm: readonly ["default", "defaultClear", "defaultBrick", "brick", "brickDefault", "brickClear", "brickRound", "round", "roundClear", "roundBrick", "clearRound", "clearDefault", "clearBrick", "clearClear"];
+export declare type TextFieldPropForm = typeof textFieldPropForm[number];
+export declare const textFieldPropFormDefault: TextFieldPropForm;
+export declare const textFieldPropStatus: readonly ["alert", "success", "warning"];
+export declare type TextFieldPropStatus = typeof textFieldPropStatus[number];
+export declare const textFieldPropWidth: readonly ["default", "full"];
+export declare type TextFieldPropWidth = typeof textFieldPropWidth[number];
+export declare const textFieldPropWidthDefault: TextFieldPropWidth;
+export declare type TextFieldPropsTextareaType<TYPE> = TYPE extends 'textarea' ? {
+    minRows?: never;
+    maxRows?: never;
+    rows?: number;
+} | {
+    rows?: never;
+    minRows?: number;
+    maxRows?: number;
+} : {
+    rows?: never;
+    minRows?: never;
+    maxRows?: never;
+};
+export declare type TextFieldPropRightSide<TYPE extends string> = TYPE extends 'number' | 'password' ? {
+    rightSide?: never;
+} : {
+    rightSide?: string | IconComponent;
+};
+export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<{
+    className?: string;
+    value?: TextFieldPropValue;
+    cols?: number;
+    onChange?: TextFieldPropOnChange;
+    id?: TextFieldPropId;
+    name?: TextFieldPropName;
+    type?: TYPE;
+    disabled?: boolean;
+    maxLength?: number;
+    size?: TextFieldPropSize;
+    view?: TextFieldPropView;
+    form?: TextFieldPropForm;
+    state?: TextFieldPropStatus;
+    status?: TextFieldPropStatus;
+    width?: TextFieldPropWidth;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    incrementButtons?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    leftSide?: string | IconComponent;
+    rightSide?: string | IconComponent;
+    withClearButton?: boolean;
+    autoComplete?: AutoCompete;
+    max?: number | string;
+    min?: number | string;
+    readOnly?: boolean;
+    required?: boolean;
+    step?: number | string | number[];
+    tabIndex?: number;
+    inputContainerRef?: React.Ref<HTMLDivElement>;
+    inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;
+    ariaLabel?: string;
+    iconSize?: IconPropSize;
+    children?: never;
+    label?: string;
+    caption?: string;
+    labelPosition?: 'top' | 'left';
+    focused?: boolean;
+    onKeyDownCapture?: React.KeyboardEventHandler;
+    onKeyPress?: React.KeyboardEventHandler;
+    onKeyPressCapture?: React.KeyboardEventHandler;
+    onKeyUp?: React.KeyboardEventHandler;
+    onKeyUpCapture?: React.KeyboardEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+}, HTMLDivElement> & TextFieldPropsTextareaType<TYPE> & TextFieldPropRightSide<TYPE>;
+export declare type TextFieldComponent = <TYPE extends string>(props: TextFieldProps<TYPE> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/__internal__/src/components/TextField/types.js

@@ -0,0 +1,24 @@
+export var textFieldPropSize = ['m', 'xs', 's', 'l'];
+export var textFieldPropSizeDefault = textFieldPropSize[0];
+export var textFieldPropView = ['default', 'clear'];
+export var textFieldPropViewDefault = textFieldPropView[0];
+export var textFieldPropForm = [
+    'default',
+    'defaultClear',
+    'defaultBrick',
+    'brick',
+    'brickDefault',
+    'brickClear',
+    'brickRound',
+    'round',
+    'roundClear',
+    'roundBrick',
+    'clearRound',
+    'clearDefault',
+    'clearBrick',
+    'clearClear',
+];
+export var textFieldPropFormDefault = textFieldPropForm[0];
+export var textFieldPropStatus = ['alert', 'success', 'warning'];
+export var textFieldPropWidth = ['default', 'full'];
+export var textFieldPropWidthDefault = textFieldPropWidth[0];

package/__internal__/src/components/Theme/Theme.css

@@ -0,0 +1,32 @@
+.Theme {
+  --graphics-size-xs: 12px;
+  --graphics-size-s: 16px;
+  --graphics-size-m: 24px;
+  --graphics-size-l: 32px;
+  --graphics-size-xl: 40px;
+  --graphics-size-2xl: 60px;
+  --graphics-size-3xl: 80px;
+  --graphics-size-4xl: 120px;
+}
+
+  .Theme *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .Theme *::-webkit-scrollbar-track {
+    background-color: var(--color-scroll-bg);
+  }
+
+  .Theme *::-webkit-scrollbar-corner {
+    background-color: var(--color-scroll-bg);
+  }
+
+  .Theme *::-webkit-scrollbar-thumb {
+    background-color: var(--color-scroll-thumb);
+    border-radius: 4px;
+  }
+
+  .Theme *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scroll-thumb-hover);
+  }

package/__internal__/src/components/Theme/Theme.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
+export { presetGpnDefault } from './presets/presetGpnDefault';
+export { presetGpnDark } from './presets/presetGpnDark';
+export { presetGpnDisplay } from './presets/presetGpnDisplay';
+export declare type ThemePreset = {
+    color: {
+        primary: string;
+        accent: string;
+        invert: string;
+    };
+    control: string;
+    font: string;
+    size: string;
+    space: string;
+    shadow: string;
+};
+declare type Props = {
+    preset: ThemePreset;
+};
+export declare type ThemeProps = PropsWithHTMLAttributes<Props, HTMLDivElement>;
+export declare const cnTheme: import("@bem-react/classname").ClassNameFormatter;
+export declare function generateThemeClassNames(preset: ThemePreset): ThemePreset;
+export declare const ThemeContext: React.Context<{
+    theme: ThemePreset;
+    themeClassNames: ThemePreset;
+}>;
+export declare const Theme: React.ForwardRefExoticComponent<Props & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
+export declare function useTheme(): {
+    theme: ThemePreset;
+    themeClassNames: ThemePreset;
+};

package/__internal__/src/components/Theme/Theme.js

@@ -0,0 +1,37 @@
+import { __assign, __rest } from "tslib";
+import React, { createContext, useContext } from 'react';
+import { cn } from '../../utils/bem';
+import { presetGpnDefault } from './presets/presetGpnDefault';
+export { presetGpnDefault } from './presets/presetGpnDefault';
+export { presetGpnDark } from './presets/presetGpnDark';
+export { presetGpnDisplay } from './presets/presetGpnDisplay';
+export var cnTheme = cn('Theme');
+export function generateThemeClassNames(preset) {
+    return {
+        color: {
+            primary: cnTheme({ color: preset.color.primary }),
+            accent: cnTheme({ color: preset.color.accent }),
+            invert: cnTheme({ color: preset.color.invert })
+        },
+        control: cnTheme({ control: preset.control }),
+        font: cnTheme({ font: preset.font }),
+        size: cnTheme({ size: preset.size }),
+        space: cnTheme({ space: preset.space }),
+        shadow: cnTheme({ shadow: preset.shadow })
+    };
+}
+var defaultContextValue = {
+    theme: presetGpnDefault,
+    themeClassNames: generateThemeClassNames(presetGpnDefault)
+};
+export var ThemeContext = createContext(defaultContextValue);
+export var Theme = React.forwardRef(function (props, ref) {
+    var className = props.className, children = props.children, preset = props.preset, otherProps = __rest(props, ["className", "children", "preset"]);
+    var mods = __assign(__assign({}, preset), { color: preset.color.primary });
+    var themeClassNames = generateThemeClassNames(preset);
+    return (React.createElement(ThemeContext.Provider, { value: { theme: preset, themeClassNames: themeClassNames } },
+        React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnTheme(mods, [className]) }), children)));
+});
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/__internal__/src/components/Theme/_color/Theme_color_gpnDark.css

@@ -0,0 +1,115 @@
+/* Базовые цвета, от которых выстраивается вся палитра */ /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ /* Базовый цвет поверхностей */ /* Проектный цвет, от которого выстраивают акцентные состояния */ /* Тонирующий цвет, от которого выстраиватся бордеры, оверлей под модальными окнами, ... */ /* Цвет ссылок и контролов, от которого выстраиваются все их состояния */ /* Цвет системнный */ /* Цвет тени */ /* Цвет успеха */ /* Цвет ошибки */ /* Цвет предупреждения */ /* Цвет осторожности */ /* Цвет нейтральный */
+
+/* stylelint-disable */
+.Theme_color_gpnDark {
+  /* //////////////////////////////
+  // Цвета фонов /////////////// */
+  --color-bg-default: rgb(34, 39, 43); /* Цвет дефолта */
+  --color-bg-secondary: rgb(22, 26, 29); /* Дополнительный цвет фона */
+  --color-bg-brand: rgb(0, 113, 178); /* Цвет фона брендированный */
+  --color-bg-link: rgb(0, 120, 210); /* Цвет фона ссылки */
+  --color-bg-border: rgba(255, 255, 255, 0.2); /* Цвет границ */
+  --color-bg-stripe: rgba(246, 251, 253, 0.06); /* Цвет зебры (например, при окрашивании фона строк таблицы через одну) */
+
+  --color-bg-ghost: rgba(246, 251, 253, 0.1); /* Цвет затенения */
+  --color-bg-tone: rgba(6, 20, 25, 0.85); /* Цвет паранджи */
+  --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
+  --color-bg-system: rgb(77, 82, 91); /* Цвет фона системнный */
+  --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
+  --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
+  --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
+  --color-bg-warning: rgb(243, 139, 0); /* Цвет фона предупреждения */
+  --color-bg-alert: rgb(254, 67, 67); /* Цвет фона ошибки */
+  --color-bg-critical: rgb(51, 0, 15); /* Цвет фона системнный */
+
+  /* //////////////////////////////
+  // Цвета текста ////////////// */
+  --color-typo-primary: rgb(250, 250, 250); /* Цвет основного текста */
+  --color-typo-secondary: rgba(255, 255, 255, 0.6); /* Цвет второстепенного текста */
+  --color-typo-ghost: rgba(255, 255, 255, 0.3); /* Цвет дополнительного текста */
+  --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
+  --color-typo-system: rgb(99, 110, 131); /* Цвет фона системнный */
+
+  --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
+  --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
+  --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */
+  --color-typo-warning: rgb(230, 130, 0); /* Цвет текста предупреждения */
+  --color-typo-alert: rgb(247, 59, 59); /* Цвет текста ошибки */
+  --color-typo-critical: rgb(97, 0, 29); /* Цвет фона системнный */
+  --color-typo-link: rgb(15, 159, 255); /* Цвет основной ссылки */
+  --color-typo-link-minor: rgb(111, 165, 200); /* Цвет второстепенной ссылки */
+
+  --color-typo-link-hover: rgb(87, 188, 255); /* Цвет ховера ссылки */
+
+  /* //////////////////////////////
+  // Цвета скроллбара ////////////// */
+  --color-scroll-bg: rgba(246, 251, 253, 0.06);
+  --color-scroll-thumb: rgba(246, 251, 253, 0.24);
+  --color-scroll-thumb-hover: rgba(246, 251, 253, 0.32);
+
+  /* /////////////////////////////
+  // Цвета контролов /////////// */
+
+  /* Default */
+  --color-control-bg-default: rgb(34, 39, 43); /* Цвет фона контрола */
+  --color-control-typo-default: rgba(255, 255, 255, 0.8); /* Цвет основного текста контрола */
+  --color-control-typo-placeholder: rgba(255, 255, 255, 0.35); /* Цвет плейсхолдера контрола */
+  --color-control-bg-border-default: rgba(246, 251, 253, 0.28); /* Цвет фона бордеров котрола */
+
+  --color-control-bg-border-default-hover: rgba(246, 251, 253, 0.52); /* Цвет фона бордеров контрола по ховеру */
+
+  --color-control-bg-border-focus: rgb(5, 147, 255); /* Цвет аутлайна контролов при фокусе */ /* TODO заменить на правило целиком */
+  --color-control-bg-focus: rgba(0, 120, 210, 0.4); /* Цвет тени в состонии фокуса */
+  --color-control-bg-active: rgba(0, 120, 210, 0.7); /* Цвет тени в состонии нажатия  */
+
+  /* Primary */
+  --color-control-bg-primary: rgb(0, 120, 210); /* Цвет фона активного контрола */
+  --color-control-bg-primary-hover: rgb(0, 145, 255); /* Цвет фона активного контрола по ховеру */
+
+  --color-control-typo-primary: rgb(255, 255, 255); /* Цвет акцентного текста */
+  --color-control-typo-primary-hover: rgb(255, 255, 255); /* Цвет акцентного текста */
+
+  /* Secondary */
+  --color-control-bg-secondary: rgba(34, 39, 43, 0); /* Цвет фона бордеров котрола */
+  --color-control-bg-border-secondary: rgb(0, 120, 210); /* Цвет фона бордеров котрола */
+
+  --color-control-bg-border-secondary-hover: rgb(0, 145, 255); /* Цвет фона бордеров контрола по ховеру */
+
+  --color-control-typo-secondary: rgb(15, 159, 255); /* Цвет второстепеного текста контрола */
+
+  --color-control-typo-secondary-hover: rgb(87, 188, 255); /* Цвет акцентного текста */
+
+  /* Ghost */
+  --color-control-bg-ghost: rgba(250, 250, 250, 0.16); /* Цвет фона дополнительного контрола */
+
+  --color-control-bg-ghost-hover: rgba(250, 250, 250, 0.23); /* Цвет фона дополнительного контрола по ховеру */
+
+  --color-control-typo-ghost: rgba(255, 255, 255, 0.75); /* Цвет дополнительного текста контрола */
+
+  --color-control-typo-ghost-hover: rgba(255, 255, 255, 0.9); /* Цвет акцентного текста */
+
+  /* Clear */
+  --color-control-bg-clear: rgba(250, 250, 250, 0); /* Цвет фона чистого контрола */
+
+  --color-control-bg-clear-hover: rgba(250, 250, 250, 0.23); /* Цвет фона чистого контрола по ховеру */
+
+  --color-control-typo-clear: rgba(255, 255, 255, 0.75); /* Цвет акцентного текста */
+  --color-control-typo-clear-hover: rgba(255, 255, 255, 0.9); /* Цвет акцентного текста */
+
+  /* Disable */
+  --color-control-bg-disable: rgba(250, 250, 250, 0.16); /* Цвет фона неактивного контрола */
+
+  --color-control-bg-border-disable: rgba(250, 250, 250, 0); /* Цвет фона бордеров неактивного контрола */
+
+  --color-control-typo-disable: rgba(255, 255, 255, 0.24); /* Цвет основного текста неактивного контрола */
+
+  /* /////////////////////////////
+  // Цвета тени /////////// */
+  --color-shadow-group-1: rgba(0, 0, 0, 0.08);
+  --color-shadow-group-2: rgba(0, 0, 0, 0.32);
+  --color-shadow-layer-1: rgba(0, 0, 0, 0.08);
+  --color-shadow-layer-2: rgba(0, 0, 0, 0.32);
+  --color-shadow-modal-1: rgba(0, 0, 0, 0.08);
+  --color-shadow-modal-2: rgba(0, 0, 0, 0.32);
+}
+/* stylelint-enable */