@hh.ru/magritte-ui-chat-input 1.0.1

package/index.css

@@ -0,0 +1,286 @@
+:root{
+  --magritte-color-background-primary-v24-8-0:#ffffff;
+  --magritte-color-stroke-neutral-v24-8-0:#DCE3EB;
+  --magritte-color-stroke-state-focused-accessible-v24-8-0:#0070ff7a;
+  --magritte-color-stroke-state-neutral-hovered-v24-8-0:#DCE3EB;
+  --magritte-color-text-primary-v24-8-0:#000000;
+  --magritte-color-text-secondary-v24-8-0:#768694;
+  --magritte-color-text-tertiary-v24-8-0:#AABBCA;
+  --magritte-color-icon-tertiary-v24-8-0:#AABBCA;
+  --magritte-gradient-component-chat-input-background-fade-v24-8-0:#ffffff00 0%, #ffffff 100%;
+  --magritte-shadow-level-1-color-v24-8-0:#7090b029;
+  --magritte-shadow-level-1-x-v24-8-0:0px;
+  --magritte-shadow-level-1-y-v24-8-0:4px;
+  --magritte-shadow-level-1-blur-v24-8-0:12px;
+  --magritte-shadow-level-1-spread-v24-8-0:0px;
+}
+
+:root{
+  --magritte-semantic-animation-time-s-duration-v24-8-0:200ms;
+  --magritte-semantic-animation-ease-base-timing-function-v24-8-0:cubic-bezier(0.4, 0.24, 0, 1);
+}
+
+.magritte-night-theme{
+  --magritte-color-background-primary-v24-8-0:#1B1B1B;
+  --magritte-color-stroke-neutral-v24-8-0:#303030;
+  --magritte-color-stroke-state-neutral-hovered-v24-8-0:#303030;
+  --magritte-color-text-primary-v24-8-0:#ffffff;
+  --magritte-color-text-secondary-v24-8-0:#ABABAB;
+  --magritte-color-text-tertiary-v24-8-0:#767676;
+  --magritte-color-icon-tertiary-v24-8-0:#767676;
+  --magritte-gradient-component-chat-input-background-fade-v24-8-0:#1b1b1b00 0%, #1b1b1b 100%;
+  --magritte-shadow-level-1-color-v24-8-0:#00000029;
+}
+.magritte-chat-input___P69oN_1-0-1{
+  --chat-input-stroke-color:var(--magritte-color-stroke-neutral-v24-8-0);
+  --chat-input-focus-shadow:0 0 0 transparent;
+  box-shadow:inset 0 0 0 1px var(--chat-input-stroke-color), var(--chat-input-focus-shadow);
+  border-radius:24px;
+  padding:12px;
+  overflow:hidden;
+  background-color:var(--magritte-color-background-primary-v24-8-0);
+  --magritte-ui-scrollbar-offset-right:-12px;
+}
+.magritte-chat-input___P69oN_1-0-1.magritte-no-background___eiIY1_1-0-1{
+  background:none;
+  --chat-input-stroke-color:transparent !important;
+}
+.magritte-chat-input___P69oN_1-0-1:has(*:focus){
+  --chat-input-focus-shadow:var(--magritte-shadow-level-1-x-v24-8-0) var(--magritte-shadow-level-1-y-v24-8-0) var(--magritte-shadow-level-1-blur-v24-8-0) var(--magritte-shadow-level-1-spread-v24-8-0) var(--magritte-shadow-level-1-color-v24-8-0);
+}
+.magritte-chat-input___P69oN_1-0-1:has(.magritte-text-input-focused___TfyLu_1-0-1){
+  outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v24-8-0);
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-chat-input___P69oN_1-0-1:hover{
+    --chat-input-stroke-color:var(--magritte-color-stroke-state-neutral-hovered-v24-8-0);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-chat-input___P69oN_1-0-1:hover{
+    --chat-input-stroke-color:var(--magritte-color-stroke-state-neutral-hovered-v24-8-0);
+  }
+}
+.magritte-content-grid___g03sT_1-0-1{
+  display:grid;
+  grid-template-columns:auto minmax(0, 1fr) auto;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-preview___baXKi_1-0-1{
+  grid-area:1 / 1 / 2 / -1;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-left___7JZYp_1-0-1{
+  grid-area:3 / 1;
+  align-self:end;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-central___zkguj_1-0-1{
+  grid-area:3 / 2;
+  align-self:center;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-right___-tGcO_1-0-1{
+  grid-area:3 / 3;
+  align-self:end;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-scrollbar-cell___--M2x_1-0-1{
+  grid-area:2 / 1 / 3 / -1;
+  position:relative;
+  pointer-events:none;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-scrollbar-cell___--M2x_1-0-1 > div{
+  pointer-events:auto;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-text-input___3AFO4_1-0-1{
+  grid-area:3 / 2;
+}
+.magritte-content-grid___g03sT_1-0-1 .magritte-text-input___3AFO4_1-0-1.magritte-layout-vertical___mVTr-_1-0-1,
+.magritte-content-grid___g03sT_1-0-1.magritte-has-central___VRZik_1-0-1 .magritte-text-input___3AFO4_1-0-1{
+  grid-area:2 / 1 / 3 / -1;
+}
+.magritte-content-grid___g03sT_1-0-1.magritte-no-left-controls___7r6yy_1-0-1:not(.magritte-has-central___VRZik_1-0-1) .magritte-text-input___3AFO4_1-0-1{
+  grid-area:2 / 1 / 4 / 3;
+}
+.magritte-content-grid___g03sT_1-0-1.magritte-no-right-controls___HBSag_1-0-1:not(.magritte-has-central___VRZik_1-0-1) .magritte-text-input___3AFO4_1-0-1{
+  grid-area:2 / 2 / 4 / -1;
+}
+.magritte-content-grid___g03sT_1-0-1.magritte-no-left-controls___7r6yy_1-0-1:not(.magritte-has-central___VRZik_1-0-1){
+  grid-template-rows:auto minmax(0, 1fr) auto;
+}
+.magritte-right___-tGcO_1-0-1,
+.magritte-left___7JZYp_1-0-1{
+  display:flex;
+  gap:8px;
+}
+.magritte-chips___gLao5_1-0-1{
+  display:flex;
+  flex-wrap:nowrap;
+  width:max-content;
+  gap:8px;
+}
+.magritte-chips-container___-bS5O_1-0-1{
+  padding:0 12px;
+}
+.magritte-no-left-controls___7r6yy_1-0-1 .magritte-chips-container___-bS5O_1-0-1{
+  padding-left:0;
+}
+.magritte-no-right-controls___HBSag_1-0-1 .magritte-chips-container___-bS5O_1-0-1{
+  padding-right:0;
+}
+.magritte-preview-block___iiPdS_1-0-1{
+  display:flex;
+  align-items:center;
+  gap:12px;
+  padding-bottom:8px;
+}
+.magritte-preview-side___ymR-u_1-0-1{
+  display:flex;
+  flex-shrink:0;
+}
+.magritte-preview-content___ZgyBD_1-0-1{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  min-width:0;
+}
+.magritte-preview-title___SkFeZ_1-0-1{
+  font-family:"hh sans";
+  font-weight:500;
+  line-height:18px;
+  font-size:12px;
+  letter-spacing:0.01em;
+  text-indent:0px;
+  text-transform:none;
+  text-decoration:none;
+  color:var(--magritte-color-text-primary-v24-8-0);
+}
+.magritte-preview-subtitle___58qfR_1-0-1{
+  font-family:"hh sans";
+  font-weight:400;
+  line-height:20px;
+  font-size:14px;
+  letter-spacing:0.005em;
+  text-indent:0px;
+  text-transform:none;
+  text-decoration:none;
+  overflow:hidden;
+  color:var(--magritte-color-text-secondary-v24-8-0);
+  white-space:nowrap;
+  text-overflow:ellipsis;
+}
+.magritte-text-input-wrapper___TPbwC_1-0-1{
+  display:contents;
+}
+.magritte-text-input___3AFO4_1-0-1{
+  box-sizing:content-box;
+  padding:0 12px;
+  border:none;
+  background:none;
+  outline:none;
+  scrollbar-width:none;
+  width:calc(100% - 24px);
+  resize:none;
+  align-self:center;
+  --fade-top:linear-gradient(#000, #000);
+  --fade-bottom:linear-gradient(#000, #000);
+  scroll-padding-top:16px;
+  scroll-padding-bottom:16px;
+  font-family:"hh sans";
+  font-weight:400;
+  line-height:20px;
+  font-size:14px;
+  letter-spacing:0.005em;
+  text-indent:0px;
+  text-transform:none;
+  text-decoration:none;
+  color:var(--magritte-color-text-primary-v24-8-0);
+}
+.magritte-text-input___3AFO4_1-0-1::placeholder{
+  color:var(--magritte-color-text-tertiary-v24-8-0);
+  opacity:1;
+}
+.magritte-text-input___3AFO4_1-0-1:focus,
+.magritte-text-input___3AFO4_1-0-1:focus-visible{
+  border:none;
+  outline:none;
+}
+.magritte-text-input___3AFO4_1-0-1.magritte-with-top-fade___okgqo_1-0-1,
+.magritte-text-input___3AFO4_1-0-1.magritte-with-bottom-fade___82gr8_1-0-1{
+  -webkit-mask:var(--fade-top) top / 100% 16px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 32px) no-repeat, var(--fade-bottom) bottom / 100% 16px no-repeat;
+  mask:var(--fade-top) top / 100% 16px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 32px) no-repeat, var(--fade-bottom) bottom / 100% 16px no-repeat;
+}
+.magritte-text-input___3AFO4_1-0-1.magritte-with-top-fade___okgqo_1-0-1{
+  --fade-top:linear-gradient(180deg, var(--magritte-gradient-component-chat-input-background-fade-v24-8-0));
+}
+.magritte-text-input___3AFO4_1-0-1.magritte-with-bottom-fade___82gr8_1-0-1{
+  --fade-bottom:linear-gradient(0deg, var(--magritte-gradient-component-chat-input-background-fade-v24-8-0));
+}
+.magritte-text-input___3AFO4_1-0-1.magritte-measure___xNKc0_1-0-1{
+  height:20px !important;
+  padding:0 !important;
+  margin:0 !important;
+}
+.magritte-voice-record___p64PV_1-0-1{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+  box-sizing:border-box;
+  padding-left:12px;
+  min-height:40px;
+  gap:8px;
+}
+.magritte-voice-record-left___njEt-_1-0-1{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  min-width:0;
+}
+.magritte-voice-record-right___UTv-U_1-0-1{
+  display:flex;
+  align-items:center;
+  gap:8px;
+}
+.magritte-voice-record-right___UTv-U_1-0-1.magritte-voice-processing___C0xnX_1-0-1{
+  padding:8px;
+}
+.magritte-voice-record-indicator___V8ybb_1-0-1{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  gap:2px;
+}
+.magritte-voice-record-indicator-bar___jgyqz_1-0-1{
+  width:2px;
+  min-height:2px;
+  max-height:2px;
+  border-radius:1000px;
+  background-color:var(--magritte-color-icon-tertiary-v24-8-0);
+  transition:max-height var(--magritte-semantic-animation-time-s-duration-v24-8-0) var(--magritte-semantic-animation-ease-base-timing-function-v24-8-0);
+  animation:magritte-voice-record-indicator-wave___4VsyE_1-0-1 400ms linear infinite alternate paused;
+}
+.magritte-voice-record-indicator-has-sound___67t5g_1-0-1 .magritte-voice-record-indicator-bar___jgyqz_1-0-1{
+  max-height:27px;
+  animation-play-state:running;
+}
+@media (prefers-reduced-motion: reduce){
+  .magritte-voice-record-indicator-has-sound___67t5g_1-0-1 .magritte-voice-record-indicator-bar___jgyqz_1-0-1{
+    animation-play-state:paused;
+  }
+}
+@keyframes magritte-voice-record-indicator-wave___4VsyE_1-0-1{
+  from{
+    height:calc(var(--target-height) * 0.62px);
+  }
+  to{
+    height:calc(var(--target-height) * 1.22px);
+  }
+}
+.magritte-mode-container___nATVD_1-0-1{
+  position:relative;
+  display:grid;
+  align-content:end;
+}
+.magritte-voice-overlay___LbxAI_1-0-1{
+  position:absolute;
+  right:0;
+  bottom:0;
+  left:0;
+}

package/index.d.ts

@@ -0,0 +1,7 @@
+export { ChatInput } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';
+export { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';
+export { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';
+export { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';
+export { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';
+export { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';
+export { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';

package/index.js

@@ -0,0 +1,38 @@
+import './index.css';
+export { ChatInput } from './public/ChatInput.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import './internal/ChatInputContext.js';
+import './internal/ModeTransition.js';
+import 'motion/react';
+import '@hh.ru/magritte-design-tokens/types';
+import './styles-CQQdqOFh.js';
+import './internal/TextInput.js';
+import './internal/useSendOnEnter.js';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-ui-scrollbar';
+import './internal/VoiceRecord.js';
+import '@hh.ru/magritte-common-use-translation';
+import './internal/FocusTarget.js';
+import './internal/focusGroup.js';
+import './internal/VoiceRecordIndicator.js';
+import './internal/useHasSound.js';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-loader';
+import '@hh.ru/magritte-ui-typography';
+import './internal/useRovingFocusGroup.js';
+import './internal/useVoiceRecordSession.js';
+import './internal/voiceSlotRegistry.js';
+import '@hh.ru/magritte-internal-slot-registry';
+import './public/ChatInputChips.js';
+import '@hh.ru/magritte-ui-chips';
+import '@hh.ru/magritte-ui-scrollable-container';
+import './public/ChatInputPreview.js';
+import '@hh.ru/magritte-ui-icon';
+import './public/ChatInputSendButton.js';
+import './internal/ChatInputSlotButton.js';
+import './public/ChatInputVoiceButton.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,7 @@
+export { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';
+export { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';
+export { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';
+export { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';
+export { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';
+export { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';
+export declare const ChatInput: import("react").ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,47 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+function enhance(mockComponent, staticProps) {
+    // удаляем внутренний свойства реакта, чтобы не перезаписать ими mockComponent
+    delete staticProps.type;
+    delete staticProps.$$typeof;
+    delete staticProps.render;
+    for (const prop in staticProps) {
+        mockComponent[prop] = staticProps[prop];
+    }
+}
+const MockComponent = ({ style, ...props }) => (
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line react/jsx-no-undef
+jsx("magritte-component-mock", { "style-data": style, ...props }));
+/**
+ * Возвращает mock React компонента
+ */
+const mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {
+    const mockWrapper = forwardRef(({ children, ...props }, ref) => {
+        const mock = (
+        // eslint-disable-next-line react/jsx-no-undef
+        jsxs(MockComponent, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props, ref) : null, withChildren ? children : null] }));
+        return WrapperComponent ? jsx(WrapperComponent, { ...props, children: mock }) : mock;
+    });
+    staticProps && enhance(mockWrapper, staticProps);
+    mockWrapper.displayName = 'magritte-ref';
+    return mockWrapper;
+};
+
+const staticProps = {
+    Chips: mockComponent('Chips', undefined, {
+        withChildren: true,
+    }),
+    Preview: mockComponent('Preview'),
+    SendButton: mockComponent('SendButton'),
+    VoiceButton: mockComponent('VoiceButton'),
+};
+const ChatInput = mockComponent('ChatInput', staticProps, {
+    withChildren: true,
+});
+
+export { ChatInput };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../mock-component/lib/setupMockComponent.js","src/index.mock.ts"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\n\nfunction enhance(mockComponent, staticProps) {\n    // удаляем внутренний свойства реакта, чтобы не перезаписать ими mockComponent\n    delete staticProps.type;\n    delete staticProps.$$typeof;\n    delete staticProps.render;\n    for (const prop in staticProps) {\n        mockComponent[prop] = staticProps[prop];\n    }\n}\nconst MockComponent = ({ style, ...props }) => (\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// eslint-disable-next-line react/jsx-no-undef\njsx(\"magritte-component-mock\", { \"style-data\": style, ...props }));\nconst MockComponentRenderProp = ({ style, ...props }) => (\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// eslint-disable-next-line react/jsx-no-undef\njsx(\"magritte-component-mock-render-prop\", { \"style-data\": style, ...props }));\n/**\n * Возвращает mock React компонента\n */\nconst mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {\n    const mockWrapper = forwardRef(({ children, ...props }, ref) => {\n        const mock = (\n        // eslint-disable-next-line react/jsx-no-undef\n        jsxs(MockComponent, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props, ref) : null, withChildren ? children : null] }));\n        return WrapperComponent ? jsx(WrapperComponent, { ...props, children: mock }) : mock;\n    });\n    staticProps && enhance(mockWrapper, staticProps);\n    mockWrapper.displayName = 'magritte-ref';\n    return mockWrapper;\n};\n/**\n * Возвращает mock React компонента, который рендерит переданный в него пропс render\n *\n * @param {String}              componentName               наименование компонента\n * @param {Object}              [staticProps]               объект со свойствами, которыми необходимо усилить mock\n * @param {Object}              [options]                   параметры мока\n * @param {boolean}             [options.withChildren]      флаг отвечает за рендеринг children компонента\n * @param {React.Component}     [options.innerDependence]   Реакт компонент, который рендерится внутри мока.\n *                                                          Необходим, когда mock компоненту требуется иметь\n *                                                           дополнительные элементы\n */\nconst mockComponentRenderProp = (componentName, staticProps, { withChildren, innerDependence, renderArguments } = { renderArguments: [] }) => {\n    const mockWrapper = ({ render, children, ...props }) => (jsxs(MockComponentRenderProp, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props) : null, withChildren ? children : null, render?.(...(renderArguments || []))] }));\n    staticProps && enhance(mockWrapper, staticProps);\n    mockWrapper.displayName = 'magritte-component-mock-render-prop';\n    return mockWrapper;\n};\n\nexport { mockComponent, mockComponentRenderProp };\n//# sourceMappingURL=setupMockComponent.js.map\n","import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';\nexport { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';\nexport { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';\nexport { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';\nexport { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';\nexport { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';\n\nconst staticProps = {\n    Chips: mockComponent('Chips', undefined, {\n        withChildren: true,\n    }),\n    Preview: mockComponent('Preview'),\n    SendButton: mockComponent('SendButton'),\n    VoiceButton: mockComponent('VoiceButton'),\n};\n\nexport const ChatInput = mockComponent('ChatInput', staticProps, {\n    withChildren: true,\n});\n"],"names":[],"mappings":";;;AAGA,SAAS,OAAO,CAAC,aAAa,EAAE,WAAW,EAAE;AAC7C;AACA,IAAI,OAAO,WAAW,CAAC,IAAI,CAAC;AAC5B,IAAI,OAAO,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAI,OAAO,WAAW,CAAC,MAAM,CAAC;AAC9B,IAAI,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE;AACpC,QAAQ,aAAa,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,CAAC;AACD,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;AAC1C;AACA;AACA;AACA,GAAG,CAAC,yBAAyB,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;AAMnE;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,WAAW,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAAG,EAAE,KAAK;AACrH,IAAI,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAK;AACpE,QAAQ,MAAM,IAAI;AAClB;AACA,QAAQ,IAAI,CAAC,aAAa,EAAE,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,eAAe,GAAG,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AACxK,QAAQ,OAAO,gBAAgB,GAAG,GAAG,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;AAC7F,KAAK,CAAC,CAAC;AACP,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACrD,IAAI,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AAC7C,IAAI,OAAO,WAAW,CAAC;AACvB,CAAC;;AC1BD,MAAM,WAAW,GAAG;AAChB,IAAA,KAAK,EAAE,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE;AACrC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC;AACjC,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC;AACvC,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC;CAC5C,CAAC;MAEW,SAAS,GAAG,aAAa,CAAC,WAAW,EAAE,WAAW,EAAE;AAC7D,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/internal/ChatInputContext.d.ts

@@ -0,0 +1,13 @@
+import { type VoiceRecordStatus } from '@hh.ru/magritte-ui-chat-input/types';
+interface ChatInputContextValue {
+    /** Хендлер отправки; SendButton вызывает его по клику */
+    onSend?: VoidFunction;
+    /** Старт записи голоса; VoiceButton вызывает его по клику. Есть внутри ChatInput
+     * (снаружи контекст пустой, кнопка неактивна) */
+    startVoiceRecord?: VoidFunction;
+    /** Статус сессии записи — VoiceButton показывает по нему ожидание доступа к микрофону */
+    voiceRecordStatus?: VoiceRecordStatus;
+}
+export declare const ChatInputContextProvider: import("react").Provider<ChatInputContextValue>;
+export declare const useChatInputContext: () => ChatInputContextValue;
+export {};

package/internal/ChatInputContext.js

@@ -0,0 +1,9 @@
+import './../index.css';
+import { createContext, useContext } from 'react';
+
+const ChatInputContext = createContext({});
+const ChatInputContextProvider = ChatInputContext.Provider;
+const useChatInputContext = () => useContext(ChatInputContext);
+
+export { ChatInputContextProvider, useChatInputContext };
+//# sourceMappingURL=ChatInputContext.js.map

package/internal/ChatInputContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInputContext.js","sources":["src/internal/ChatInputContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { type VoiceRecordStatus } from '@hh.ru/magritte-ui-chat-input/types';\n\ninterface ChatInputContextValue {\n    /** Хендлер отправки; SendButton вызывает его по клику */\n    onSend?: VoidFunction;\n    /** Старт записи голоса; VoiceButton вызывает его по клику. Есть внутри ChatInput\n     * (снаружи контекст пустой, кнопка неактивна) */\n    startVoiceRecord?: VoidFunction;\n    /** Статус сессии записи — VoiceButton показывает по нему ожидание доступа к микрофону */\n    voiceRecordStatus?: VoiceRecordStatus;\n}\n\nconst ChatInputContext = createContext<ChatInputContextValue>({});\n\nexport const ChatInputContextProvider = ChatInputContext.Provider;\n\nexport const useChatInputContext = (): ChatInputContextValue => useContext(ChatInputContext);\n"],"names":[],"mappings":";;AAcA,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC;AAErD,MAAA,wBAAwB,GAAG,gBAAgB,CAAC,SAAS;AAErD,MAAA,mBAAmB,GAAG,MAA6B,UAAU,CAAC,gBAAgB;;;;"}

package/internal/ChatInputSlotButton.d.ts

@@ -0,0 +1,16 @@
+import { type FC, type MouseEventHandler, type ReactElement, type ReactNode } from 'react';
+import { type IconProps } from '@hh.ru/magritte-ui-icon/types';
+interface ChatInputSlotButtonProps {
+    /** Встроенная иконка со всеми пропсами — рендерится, когда children не переданы */
+    icon: ReactElement;
+    /** Те же пропсы иконки — уходят в IconDefaultPropsContext, чтобы children-иконка получила
+     * то же оформление/aria и (за счёт onClick) стала интерактивной кнопкой */
+    iconProps: Partial<IconProps>;
+    /** Обработчик клика (тот же, что в `iconProps.onClick`) — им ловим всплывший клик от
+     * произвольных (не-иконочных) children */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Кастомный контент вместо встроенной иконки */
+    children?: ReactNode;
+}
+export declare const ChatInputSlotButton: FC<ChatInputSlotButtonProps>;
+export {};

package/internal/ChatInputSlotButton.js

@@ -0,0 +1,25 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, Children } from 'react';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
+
+const ChatInputSlotButton = ({ icon, iconProps, onClick, children }) => {
+    const handledEventRef = useRef(null);
+    const isDisabled = useDisabled();
+    if (Children.toArray(children).length === 0) {
+        return icon;
+    }
+    const handleClickOnce = (event) => {
+        if (handledEventRef.current === event.nativeEvent || isDisabled) {
+            return;
+        }
+        handledEventRef.current = event.nativeEvent;
+        onClick?.(event);
+    };
+    return (jsx(IconDefaultPropsContext, { props: { ...iconProps, onClick: handleClickOnce }, children: jsx("div", { style: { display: 'contents' }, onClick: handleClickOnce, children: children }) }));
+};
+ChatInputSlotButton.displayName = 'ChatInputSlotButton';
+
+export { ChatInputSlotButton };
+//# sourceMappingURL=ChatInputSlotButton.js.map

package/internal/ChatInputSlotButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInputSlotButton.js","sources":["src/internal/ChatInputSlotButton.tsx"],"sourcesContent":["import {\n    Children,\n    type FC,\n    type MouseEvent as ReactMouseEvent,\n    type MouseEventHandler,\n    type ReactElement,\n    type ReactNode,\n    useRef,\n} from 'react';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport { type IconProps } from '@hh.ru/magritte-ui-icon/types';\n\ninterface ChatInputSlotButtonProps {\n    /** Встроенная иконка со всеми пропсами — рендерится, когда children не переданы */\n    icon: ReactElement;\n    /** Те же пропсы иконки — уходят в IconDefaultPropsContext, чтобы children-иконка получила\n     * то же оформление/aria и (за счёт onClick) стала интерактивной кнопкой */\n    iconProps: Partial<IconProps>;\n    /** Обработчик клика (тот же, что в `iconProps.onClick`) — им ловим всплывший клик от\n     * произвольных (не-иконочных) children */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n    /** Кастомный контент вместо встроенной иконки */\n    children?: ReactNode;\n}\n\nexport const ChatInputSlotButton: FC<ChatInputSlotButtonProps> = ({ icon, iconProps, onClick, children }) => {\n    const handledEventRef = useRef<Event | null>(null);\n    const isDisabled = useDisabled();\n\n    if (Children.toArray(children).length === 0) {\n        return icon;\n    }\n\n    const handleClickOnce = (event: ReactMouseEvent<HTMLElement>) => {\n        if (handledEventRef.current === event.nativeEvent || isDisabled) {\n            return;\n        }\n        handledEventRef.current = event.nativeEvent;\n        onClick?.(event as ReactMouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n        <IconDefaultPropsContext props={{ ...iconProps, onClick: handleClickOnce }}>\n            <div style={{ display: 'contents' }} onClick={handleClickOnce}>\n                {children}\n            </div>\n        </IconDefaultPropsContext>\n    );\n};\n\nChatInputSlotButton.displayName = 'ChatInputSlotButton';\n"],"names":["_jsx"],"mappings":";;;;;AA2BO,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AACxG,IAAA,MAAM,eAAe,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;AACnD,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC;IAEjC,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;AACzC,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAmC,KAAI;QAC5D,IAAI,eAAe,CAAC,OAAO,KAAK,KAAK,CAAC,WAAW,IAAI,UAAU,EAAE;YAC7D,OAAO;SACV;AACD,QAAA,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;AAC5C,QAAA,OAAO,GAAG,KAA2C,CAAC,CAAC;AAC3D,KAAC,CAAC;AAEF,IAAA,QACIA,GAAA,CAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,EACtE,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,eAAe,EACxD,QAAA,EAAA,QAAQ,EACP,CAAA,EAAA,CACgB,EAC5B;AACN,EAAE;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/internal/FocusTarget.d.ts

@@ -0,0 +1,14 @@
+import { type FC, type ReactNode } from 'react';
+interface FocusTargetProps {
+    /** Приоритет обхода стрелками в roving-группе (меньше — раньше), см. FOCUS_PRIORITY */
+    priority: number;
+    children: ReactNode;
+}
+/**
+ * Обёртка-маркер вокруг наших кнопок для roving-группы (useRovingFocusGroup). `display:contents` —
+ * не создаёт бокс, так что раскладка слота/блока записи не меняется, а менеджер находит кнопку
+ * внутри по data-атрибуту. Маркер вешаем на обёртку, а не на саму иконку: кастомный data-* на
+ * иконке уезжает на внутренний скрытый <svg> (не на фокусируемый <button>) и не проходит по типам.
+ */
+export declare const FocusTarget: FC<FocusTargetProps>;
+export {};

package/internal/FocusTarget.js

@@ -0,0 +1,17 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { focusPriorityProps } from './focusGroup.js';
+
+// стиль обёртки-маркера: не создаёт бокс, дети остаются flex-элементами родительского слота
+const TARGET_STYLE = { display: 'contents' };
+/**
+ * Обёртка-маркер вокруг наших кнопок для roving-группы (useRovingFocusGroup). `display:contents` —
+ * не создаёт бокс, так что раскладка слота/блока записи не меняется, а менеджер находит кнопку
+ * внутри по data-атрибуту. Маркер вешаем на обёртку, а не на саму иконку: кастомный data-* на
+ * иконке уезжает на внутренний скрытый <svg> (не на фокусируемый <button>) и не проходит по типам.
+ */
+const FocusTarget = ({ priority, children }) => (jsx("span", { style: TARGET_STYLE, ...focusPriorityProps(priority), children: children }));
+FocusTarget.displayName = 'ChatInputFocusTarget';
+
+export { FocusTarget };
+//# sourceMappingURL=FocusTarget.js.map

package/internal/FocusTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTarget.js","sources":["src/internal/FocusTarget.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { focusPriorityProps } from '@hh.ru/magritte-ui-chat-input/internal/focusGroup';\n\n// стиль обёртки-маркера: не создаёт бокс, дети остаются flex-элементами родительского слота\nconst TARGET_STYLE = { display: 'contents' } as const;\n\ninterface FocusTargetProps {\n    /** Приоритет обхода стрелками в roving-группе (меньше — раньше), см. FOCUS_PRIORITY */\n    priority: number;\n    children: ReactNode;\n}\n\n/**\n * Обёртка-маркер вокруг наших кнопок для roving-группы (useRovingFocusGroup). `display:contents` —\n * не создаёт бокс, так что раскладка слота/блока записи не меняется, а менеджер находит кнопку\n * внутри по data-атрибуту. Маркер вешаем на обёртку, а не на саму иконку: кастомный data-* на\n * иконке уезжает на внутренний скрытый <svg> (не на фокусируемый <button>) и не проходит по типам.\n */\nexport const FocusTarget: FC<FocusTargetProps> = ({ priority, children }) => (\n    <span style={TARGET_STYLE} {...focusPriorityProps(priority)}>\n        {children}\n    </span>\n);\n\nFocusTarget.displayName = 'ChatInputFocusTarget';\n"],"names":["_jsx"],"mappings":";;;AAIA;AACA,MAAM,YAAY,GAAG,EAAE,OAAO,EAAE,UAAU,EAAW,CAAC;AAQtD;;;;;AAKG;AACU,MAAA,WAAW,GAAyB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MACpEA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,YAAY,EAAA,GAAM,kBAAkB,CAAC,QAAQ,CAAC,EACtD,QAAA,EAAA,QAAQ,EACN,CAAA,EACT;AAEF,WAAW,CAAC,WAAW,GAAG,sBAAsB;;;;"}

package/internal/ModeTransition.d.ts

@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from 'react';
+type ChatInputMode = 'text' | 'voice';
+export interface ModeTransitionProps {
+    /** Активный режим; смена запускает кроссфейд контента и анимацию высоты оболочки */
+    mode: ChatInputMode;
+    /** Контент текстового режима (сетка со слотами и вводом) */
+    text: ReactNode;
+    /** Контент режима записи голоса */
+    voice: ReactNode;
+}
+export declare const ModeTransition: FC<ModeTransitionProps>;
+export {};

package/internal/ModeTransition.js

@@ -0,0 +1,29 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useReducedMotion, motion } from 'motion/react';
+import { tokenSemanticAnimationEaseBaseX1, tokenSemanticAnimationEaseBaseY1, tokenSemanticAnimationEaseBaseX2, tokenSemanticAnimationEaseBaseY2, tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';
+import { s as styles } from '../styles-CQQdqOFh.js';
+
+const EASE_BASE = [
+    tokenSemanticAnimationEaseBaseX1,
+    tokenSemanticAnimationEaseBaseY1,
+    tokenSemanticAnimationEaseBaseX2,
+    tokenSemanticAnimationEaseBaseY2,
+];
+const MODE_TRANSITION_DURATION_MS = tokenSemanticAnimationTimeSDuration;
+const INSTANT_TRANSITION = { duration: 0 };
+const MODE_CONTENT_TRANSITION = {
+    duration: MODE_TRANSITION_DURATION_MS / 1000,
+    ease: EASE_BASE,
+};
+const VISIBLE_LAYER = { opacity: 1, visibility: 'visible' };
+const HIDDEN_LAYER = { opacity: 0, transitionEnd: { visibility: 'hidden' } };
+const ModeTransition = ({ mode, text, voice }) => {
+    const transition = useReducedMotion() ? INSTANT_TRANSITION : MODE_CONTENT_TRANSITION;
+    const isVoice = mode === 'voice';
+    return (jsxs(motion.div, { className: styles.modeContainer, animate: { height: isVoice ? 40 : 'auto' }, transition: transition, children: [jsx(motion.div, { initial: false, animate: isVoice ? HIDDEN_LAYER : VISIBLE_LAYER, transition: transition, "aria-hidden": isVoice, children: text }), jsx(motion.div, { className: styles.voiceOverlay, initial: false, animate: isVoice ? VISIBLE_LAYER : HIDDEN_LAYER, transition: transition, "aria-hidden": !isVoice, children: voice })] }));
+};
+ModeTransition.displayName = 'ChatInputModeTransition';
+
+export { ModeTransition };
+//# sourceMappingURL=ModeTransition.js.map

package/internal/ModeTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeTransition.js","sources":["src/internal/ModeTransition.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\nimport { motion, type TargetAndTransition, useReducedMotion } from 'motion/react';\n\nimport {\n    tokenSemanticAnimationEaseBaseX1,\n    tokenSemanticAnimationEaseBaseX2,\n    tokenSemanticAnimationEaseBaseY1,\n    tokenSemanticAnimationEaseBaseY2,\n    tokenSemanticAnimationTimeSDuration,\n} from '@hh.ru/magritte-design-tokens/types';\n\nimport styles from '../styles.less';\n\ntype ChatInputMode = 'text' | 'voice';\n\nexport interface ModeTransitionProps {\n    /** Активный режим; смена запускает кроссфейд контента и анимацию высоты оболочки */\n    mode: ChatInputMode;\n    /** Контент текстового режима (сетка со слотами и вводом) */\n    text: ReactNode;\n    /** Контент режима записи голоса */\n    voice: ReactNode;\n}\n\nconst EASE_BASE = [\n    tokenSemanticAnimationEaseBaseX1,\n    tokenSemanticAnimationEaseBaseY1,\n    tokenSemanticAnimationEaseBaseX2,\n    tokenSemanticAnimationEaseBaseY2,\n] as const;\n\nconst MODE_TRANSITION_DURATION_MS = tokenSemanticAnimationTimeSDuration;\nconst INSTANT_TRANSITION = { duration: 0 } as const;\n\nconst MODE_CONTENT_TRANSITION = {\n    duration: MODE_TRANSITION_DURATION_MS / 1000,\n    ease: EASE_BASE,\n} as const;\n\nconst VISIBLE_LAYER: TargetAndTransition = { opacity: 1, visibility: 'visible' };\nconst HIDDEN_LAYER: TargetAndTransition = { opacity: 0, transitionEnd: { visibility: 'hidden' } };\n\nexport const ModeTransition: FC<ModeTransitionProps> = ({ mode, text, voice }) => {\n    const transition = useReducedMotion() ? INSTANT_TRANSITION : MODE_CONTENT_TRANSITION;\n    const isVoice = mode === 'voice';\n\n    return (\n        <motion.div\n            className={styles.modeContainer}\n            animate={{ height: isVoice ? 40 : 'auto' }}\n            transition={transition}\n        >\n            <motion.div\n                initial={false}\n                animate={isVoice ? HIDDEN_LAYER : VISIBLE_LAYER}\n                transition={transition}\n                aria-hidden={isVoice}\n            >\n                {text}\n            </motion.div>\n            <motion.div\n                className={styles.voiceOverlay}\n                initial={false}\n                animate={isVoice ? VISIBLE_LAYER : HIDDEN_LAYER}\n                transition={transition}\n                aria-hidden={!isVoice}\n            >\n                {voice}\n            </motion.div>\n        </motion.div>\n    );\n};\n\nModeTransition.displayName = 'ChatInputModeTransition';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAwBA,MAAM,SAAS,GAAG;IACd,gCAAgC;IAChC,gCAAgC;IAChC,gCAAgC;IAChC,gCAAgC;CAC1B,CAAC;AAEX,MAAM,2BAA2B,GAAG,mCAAmC,CAAC;AACxE,MAAM,kBAAkB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAW,CAAC;AAEpD,MAAM,uBAAuB,GAAG;IAC5B,QAAQ,EAAE,2BAA2B,GAAG,IAAI;AAC5C,IAAA,IAAI,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,aAAa,GAAwB,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjF,MAAM,YAAY,GAAwB,EAAE,OAAO,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,CAAC;AAE3F,MAAM,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAI;AAC7E,IAAA,MAAM,UAAU,GAAG,gBAAgB,EAAE,GAAG,kBAAkB,GAAG,uBAAuB,CAAC;AACrF,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC;IAEjC,QACIA,KAAC,MAAM,CAAC,GAAG,EACP,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,GAAG,EAAE,GAAG,MAAM,EAAE,EAC1C,UAAU,EAAE,UAAU,EAEtB,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACP,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,OAAO,GAAG,YAAY,GAAG,aAAa,EAC/C,UAAU,EAAE,UAAU,iBACT,OAAO,EAAA,QAAA,EAEnB,IAAI,EAAA,CACI,EACbA,GAAA,CAAC,MAAM,CAAC,GAAG,IACP,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,OAAO,GAAG,aAAa,GAAG,YAAY,EAC/C,UAAU,EAAE,UAAU,iBACT,CAAC,OAAO,YAEpB,KAAK,EAAA,CACG,CACJ,EAAA,CAAA,EACf;AACN,EAAE;AAEF,cAAc,CAAC,WAAW,GAAG,yBAAyB;;;;"}

package/internal/TextInput.d.ts

@@ -0,0 +1,18 @@
+import { type TextareaHTMLAttributes, type FocusEventHandler } from 'react';
+export declare const useFocus: <T extends HTMLTextAreaElement = HTMLTextAreaElement>() => {
+    focusHandler: FocusEventHandler<T>;
+    blurHandler: FocusEventHandler<T>;
+    isFocused: boolean;
+};
+export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
+    value: string;
+    maxHeight?: number;
+    layout: "vertical" | "horizontal";
+    onSend?: VoidFunction;
+    /** Ширина контейнера; её изменение пере-измеряет layout (перенос текста зависит от ширины) */
+    containerWidth?: number;
+    /** Есть центральный слот - ввод всегда на своём ряду, паддинги spacious */
+    hasCentral: boolean;
+    /** Контролы с обеих сторон - в вертикальном лейауте ввод уезжает на свой ряд, паддинги spacious */
+    hasBothSideControls: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;