@cloud-ru/ds-fields 1.0.0

package/dist/cjs/components/FieldTime/mask.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseTimeMask = parseTimeMask;
+exports.timeToMaskString = timeToMaskString;
+function getMaxLen(showSeconds) {
+    return showSeconds ? 6 : 4;
+}
+function parseTimeMask(input, showSeconds) {
+    const digits = input.replace(/\D/g, '');
+    const expected = getMaxLen(showSeconds);
+    if (digits.length !== expected)
+        return undefined;
+    const hours = Number(digits.slice(0, 2));
+    const minutes = Number(digits.slice(2, 4));
+    const seconds = showSeconds ? Number(digits.slice(4, 6)) : 0;
+    if (hours > 23 || minutes > 59 || seconds > 59)
+        return undefined;
+    return showSeconds ? { hours, minutes, seconds } : { hours, minutes };
+}
+function timeToMaskString(value, showSeconds) {
+    const pad = (n) => String(n ?? 0).padStart(2, '0');
+    const head = `${pad(value.hours)}:${pad(value.minutes)}`;
+    return showSeconds ? `${head}:${pad(value.seconds)}` : head;
+}

package/dist/cjs/components/FieldTime/styles.module.css

@@ -0,0 +1,3 @@
+.trigger{
+  cursor:text;
+}

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

@@ -0,0 +1,14 @@
+export * from './FieldColor';
+export * from './FieldCombo';
+export * from './FieldDate';
+export { SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+export type { Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+export * from './FieldSecure';
+export * from './FieldSelect';
+export * from './FieldSlider';
+export * from './FieldStepper';
+export * from './FieldText';
+export * from './FieldTextArea';
+export * from './FieldTime';
+export { FieldShell } from './shared';
+export type { FieldElementButtonProps, FieldShellProps } from './shared';

package/dist/cjs/components/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldShell = exports.VALIDATION_STATE = exports.SIZE = void 0;
+__exportStar(require("./FieldColor"), exports);
+__exportStar(require("./FieldCombo"), exports);
+__exportStar(require("./FieldDate"), exports);
+var field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+Object.defineProperty(exports, "SIZE", { enumerable: true, get: function () { return field_decorator_1.SIZE; } });
+Object.defineProperty(exports, "VALIDATION_STATE", { enumerable: true, get: function () { return field_decorator_1.VALIDATION_STATE; } });
+__exportStar(require("./FieldSecure"), exports);
+__exportStar(require("./FieldSelect"), exports);
+__exportStar(require("./FieldSlider"), exports);
+__exportStar(require("./FieldStepper"), exports);
+__exportStar(require("./FieldText"), exports);
+__exportStar(require("./FieldTextArea"), exports);
+__exportStar(require("./FieldTime"), exports);
+var shared_1 = require("./shared");
+Object.defineProperty(exports, "FieldShell", { enumerable: true, get: function () { return shared_1.FieldShell; } });

package/dist/cjs/components/shared/helperComponents/FieldElementButton/FieldElementButton.d.ts

@@ -0,0 +1,35 @@
+import { KeyboardEvent, ReactNode } from 'react';
+import { ButtonSize, Variant } from './types';
+export type FieldElementButtonProps = {
+    /** Положение относительно поля */
+    variant: Variant;
+    /**
+     * Размер (совпадает с размером поля)
+     * @default 'm'
+     */
+    size?: ButtonSize;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Деактивировано */
+    disabled?: boolean;
+    /** Содержимое (иконка и т.д.) */
+    action: ReactNode;
+    /** Показать шеврон раскрытия */
+    withDropdownList?: boolean;
+    /**
+     * Контролируемое состояние раскрытия (используется обёрткой `FieldElementButtonList`).
+     * Если задано — шеврон отражает это значение; иначе кнопка управляет шевроном сама.
+     */
+    open?: boolean;
+    /** Обработчик нажатия клавиш (передаётся обёрткой `Droplist` для ArrowDown/ArrowUp) */
+    onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
+    /** Обработчик клика */
+    onClick?(): void;
+    /** HTML tabIndex (`-1` — исключить кнопку из tab-order, фокус по Tab уходит в поле) */
+    tabIndex?: number;
+    /** CSS-класс (передаётся обёрткой `Droplist` / `PopoverPrivate` на триггер) */
+    className?: string;
+    /** data-test-id кнопки-слота */
+    'data-test-id'?: string;
+};
+export declare const FieldElementButton: import("react").ForwardRefExoticComponent<FieldElementButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/shared/helperComponents/FieldElementButton/FieldElementButton.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldElementButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const loader_1 = require("@cloud-ru/ds-loader");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const SUN_SIZE_MAP = {
+    [constants_1.BUTTON_SIZE.S]: loader_1.SUN_SIZE.XS,
+    [constants_1.BUTTON_SIZE.M]: loader_1.SUN_SIZE.S,
+    [constants_1.BUTTON_SIZE.L]: loader_1.SUN_SIZE.S,
+};
+exports.FieldElementButton = (0, react_1.forwardRef)(function FieldElementButton({ size = constants_1.BUTTON_SIZE.M, loading = false, disabled = false, onClick, onKeyDown, withDropdownList, open, variant, action, className, tabIndex, 'data-test-id': dataTestId, }, ref) {
+    const [isListOpen, setListOpen] = (0, react_1.useState)(false);
+    const [stateLayerPressed, setStateLayerPressed] = (0, react_1.useState)(false);
+    // Если `open` контролируется снаружи (FieldElementButtonList) — шеврон следует за ним,
+    // иначе кнопка хранит состояние раскрытия сама.
+    const listOpen = open ?? isListOpen;
+    const handleListToggleClick = (0, react_1.useCallback)(() => {
+        setListOpen(prevOpen => !prevOpen);
+        onClick?.();
+    }, [onClick]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (disabled || loading) {
+            return;
+        }
+        if (event.key === 'Enter' && !event.repeat) {
+            setStateLayerPressed(true);
+        }
+        onKeyDown?.(event);
+    }, [disabled, loading, onKeyDown]);
+    const handleKeyUp = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Enter') {
+            setStateLayerPressed(false);
+        }
+    }, []);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setStateLayerPressed(false);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: 'button', className: (0, classnames_1.default)(styles_module_scss_1.default.buttonContainer, className), onClick: loading || disabled ? undefined : handleListToggleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: handleBlur, disabled: disabled || loading || undefined, tabIndex: tabIndex, "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-disabled": disabled || undefined, "data-pressed": stateLayerPressed ? true : undefined, "data-test-id": dataTestId, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapper, children: [loading && !disabled ? (0, jsx_runtime_1.jsx)(loader_1.Sun, { size: SUN_SIZE_MAP[size] }) : action, withDropdownList && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.chevron, children: listOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) })] })] }));
+});

package/dist/cjs/components/shared/helperComponents/FieldElementButton/FieldElementButtonList.d.ts

@@ -0,0 +1,26 @@
+import { DroplistProps } from '@cloud-ru/ds-list';
+import { FieldElementButtonProps } from './FieldElementButton';
+/**
+ * Конфигурация встроенного выпадающего списка (действия / выбор) на `@cloud-ru/ds-list` `Droplist`.
+ */
+export type FieldElementDroplistProps = Pick<DroplistProps, 'items' | 'pinTop' | 'pinBottom' | 'selection' | 'search' | 'scroll' | 'scrollToSelectedItem' | 'placement' | 'widthStrategy' | 'virtualized' | 'closeDroplistOnItemClick'> & {
+    /** Контролируемое состояние раскрытия */
+    open?: boolean;
+    /** Колбек смены состояния раскрытия */
+    onOpenChange?(open: boolean): void;
+};
+export type FieldElementButtonListProps = Omit<FieldElementButtonProps, 'open' | 'withDropdownList'> & {
+    /** Параметры встроенного выпадающего списка */
+    droplist: FieldElementDroplistProps;
+};
+/**
+ * Кнопка-слот поля со встроенным выпадающим списком на `@cloud-ru/ds-list` `Droplist`.
+ *
+ * Триггером выступает `FieldElementButton`, список раскрывается кликом (`trigger='click'`),
+ * шеврон следует за фактическим `open`, навигация ArrowDown/ArrowUp передаётся `Droplist`'ом
+ * в триггер.
+ */
+export declare const FieldElementButtonList: import("react").ForwardRefExoticComponent<Omit<FieldElementButtonProps, "open" | "withDropdownList"> & {
+    /** Параметры встроенного выпадающего списка */
+    droplist: FieldElementDroplistProps;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/shared/helperComponents/FieldElementButton/FieldElementButtonList.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldElementButtonList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@cloud-ru/ds-list");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const FieldElementButton_1 = require("./FieldElementButton");
+/**
+ * Кнопка-слот поля со встроенным выпадающим списком на `@cloud-ru/ds-list` `Droplist`.
+ *
+ * Триггером выступает `FieldElementButton`, список раскрывается кликом (`trigger='click'`),
+ * шеврон следует за фактическим `open`, навигация ArrowDown/ArrowUp передаётся `Droplist`'ом
+ * в триггер.
+ */
+exports.FieldElementButtonList = (0, react_1.forwardRef)(function FieldElementButtonList({ droplist, size, onKeyDown, ...buttonProps }, ref) {
+    const { open: openProp, onOpenChange, closeDroplistOnItemClick, ...droplistProps } = droplist;
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({
+        value: openProp,
+        defaultValue: false,
+        onChange: onOpenChange,
+    });
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { ...droplistProps, trigger: 'click', size: size, open: open, onOpenChange: setOpen, closeDroplistOnItemClick: closeDroplistOnItemClick ?? true, children: (0, jsx_runtime_1.jsx)(FieldElementButton_1.FieldElementButton, { ...buttonProps, ref: ref, size: size, withDropdownList: true, open: open, onKeyDown: (event) => onKeyDown?.(event) }) }));
+});

package/dist/cjs/components/shared/helperComponents/FieldElementButton/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const VARIANT: {
+    readonly Before: "before";
+    readonly After: "after";
+};
+export declare const BUTTON_SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};

package/dist/cjs/components/shared/helperComponents/FieldElementButton/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_SIZE = exports.VARIANT = void 0;
+exports.VARIANT = {
+    Before: 'before',
+    After: 'after',
+};
+exports.BUTTON_SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};

package/dist/cjs/components/shared/helperComponents/FieldElementButton/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FieldElementButton';
+export * from './FieldElementButtonList';
+export * from './constants';
+export * from './types';

package/dist/cjs/components/shared/helperComponents/FieldElementButton/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldElementButton"), exports);
+__exportStar(require("./FieldElementButtonList"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css

@@ -0,0 +1,204 @@
+@charset "UTF-8";
+.chevron{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+
+.elementWrapper{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.backgroundStateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:initial;
+}
+
+.focusLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  display:none;
+  border-radius:inherit;
+  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+
+.buttonContainer{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  border:none;
+  background:none;
+}
+.buttonContainer[data-size=s]{
+  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.buttonContainer[data-size=s][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=s][data-variant=after]{
+  border-radius:0 var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.buttonContainer[data-size=s] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.buttonContainer[data-size=s] .elementWrapper svg{
+  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.buttonContainer[data-size=m]{
+  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=m][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=m][data-variant=after]{
+  border-radius:0 var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.buttonContainer[data-size=m] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.buttonContainer[data-size=m] .elementWrapper svg{
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.buttonContainer[data-size=l]{
+  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=l][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=l][data-variant=after]{
+  border-radius:0 var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.buttonContainer[data-size=l] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+.buttonContainer[data-size=l] .elementWrapper svg{
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]){
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.buttonContainer[data-disabled=true] .elementWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.buttonContainer[data-loading=true], .buttonContainer[data-disabled=true]{
+  cursor:not-allowed;
+}
+.buttonContainer[data-loading=true] .backgroundStateLayer, .buttonContainer[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}
+.buttonContainer:not([data-disabled=true])[data-loading=true]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.buttonContainer:focus-visible{
+  outline:none;
+}
+.buttonContainer:focus-visible .focusLayer{
+  display:block;
+}

package/dist/cjs/components/shared/helperComponents/FieldElementButton/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { BUTTON_SIZE, VARIANT } from './constants';
+export type ButtonSize = ValueOf<typeof BUTTON_SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

package/dist/cjs/components/shared/helperComponents/FieldElementButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts

@@ -0,0 +1,43 @@
+import { Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { CSSProperties, ReactNode } from 'react';
+export type FieldShellProps = WithSupportProps<{
+    /** Контент поля (input / scroll / редактор). Рендерится в fieldContainer между header и footer. */
+    children: ReactNode;
+    /** Размер поля */
+    size?: Size;
+    /** Состояние валидации — тонирует acrylic-фон */
+    validationState?: ValidationState;
+    /** Поле выключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /**
+     * Acrylic-фон поля
+     * @default true
+     */
+    background?: boolean;
+    /** Виден ли клавиатурный фокус (управляется потребителем по `:focus-visible` контента) */
+    focusVisible?: boolean;
+    /** Hover поля (управляется потребителем) */
+    hover?: boolean;
+    /** Ряд элементов над контентом (тулбар, чипы) */
+    header?: ReactNode;
+    /** Ряд элементов под контентом (действия, счётчик) */
+    footer?: ReactNode;
+    /** CSS-класс оболочки (fieldWrapper) */
+    className?: string;
+    /** Inline-стиль оболочки (например, CSS-переменные высоты) */
+    style?: CSSProperties;
+    /** Колбек входа курсора в поле */
+    onMouseEnter?(): void;
+    /** Колбек выхода курсора из поля */
+    onMouseLeave?(): void;
+}>;
+/**
+ * Визуальная оболочка поля: слои material/border/focus + контейнер со слотами
+ * header / content / footer. Единый source-of-truth shell'а для `FieldTextArea` и
+ * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
+ * тот же внешний вид, но не подходит нативный `<textarea>`.
+ */
+export declare function FieldShell({ children, size, validationState, disabled, readonly: readOnly, background, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }: FieldShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldShell = FieldShell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
+const utils_2 = require("../../utils");
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+/**
+ * Визуальная оболочка поля: слои material/border/focus + контейнер со слотами
+ * header / content / footer. Единый source-of-truth shell'а для `FieldTextArea` и
+ * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
+ * тот же внешний вид, но не подходит нативный `<textarea>`.
+ */
+function FieldShell({ children, size = field_decorator_1.SIZE.M, validationState = field_decorator_1.VALIDATION_STATE.Default, disabled, readonly: readOnly, background = true, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.extractSupportProps)(rest), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, className), "data-size": size, "data-validation-state": validationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, utils_2.getAcrylicProps)({ validationState, disabled, readonly: readOnly, hover, focusVisible }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), header && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.header, children: header }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.footer, children: footer })] }));
+}

package/dist/cjs/components/shared/helperComponents/FieldShell/index.d.ts

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

package/dist/cjs/components/shared/helperComponents/FieldShell/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldShell"), exports);

package/dist/cjs/components/shared/helperComponents/FieldShell/styles.module.css

@@ -0,0 +1,11 @@
+.header{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}
+
+.footer{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}

package/dist/cjs/components/shared/hooks/useCopyButton.d.ts

@@ -0,0 +1,20 @@
+import { ButtonProps, Size as InputPrivateSize } from '@cloud-ru/ds-input-private';
+import { MouseEvent, RefObject } from 'react';
+type UseCopyButtonProps = {
+    copyButtonRef: RefObject<HTMLButtonElement | null>;
+    showCopyButton: boolean;
+    /**
+     * Колбек копирования. Возвращает `true`, если значение скопировано (для асинхронного
+     * источника — `Promise<boolean>`). Галочка показывается только при успехе.
+     */
+    onCopy(event: MouseEvent<HTMLButtonElement>): boolean | Promise<boolean>;
+    size: InputPrivateSize;
+    disabled?: boolean;
+    /** data-test-id кнопки. Переопределяется полем, когда у него свой публичный id слота. */
+    dataTestId?: string;
+};
+/**
+ * Кнопка «Копировать» для postfix (аналогично useClearButton в input-private).
+ */
+export declare function useCopyButton({ copyButtonRef, showCopyButton, onCopy, size, disabled, dataTestId, }: UseCopyButtonProps): ButtonProps;
+export {};