From 1e160a5f03c2eb8cb20ff2b23c492bf9e5c615d8 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Thu, 9 Jul 2026 19:24:59 -0300
Subject: [PATCH 1/2] feat(BBBInput): add labeled text field with inline action
 button

Adds a new BBBInput component unifying the recurring "text field + submit
button" pattern found ad hoc in chat, guest messages and breakouts (issue #34):
an auto-growing textarea with a labeled action button, submit-on-Enter,
controlled/uncontrolled value handling matching BBBSearch, an opt-in
"sent" feedback affordance, and beforeButton/afterButton slots for extra
actions (e.g. an emoji picker) next to the submit button.

Registers the component across the package's export surface (components
index, webpack entries, package.json exports/typesVersions, root README)
following the existing per-component conventions.
---
 README.md                                  |   1 +
 package.json                               |  10 +
 src/components/Input/README.md             | 118 +++++++++++
 src/components/Input/component.stories.tsx | 229 +++++++++++++++++++++
 src/components/Input/component.tsx         | 192 +++++++++++++++++
 src/components/Input/index.ts              |   1 +
 src/components/Input/styles.ts             | 107 ++++++++++
 src/components/Input/types.ts              | 108 ++++++++++
 src/components/index.ts                    |   1 +
 webpack.config.babel.js                    |   1 +
 10 files changed, 768 insertions(+)
 create mode 100644 src/components/Input/README.md
 create mode 100644 src/components/Input/component.stories.tsx
 create mode 100644 src/components/Input/component.tsx
 create mode 100644 src/components/Input/index.ts
 create mode 100644 src/components/Input/styles.ts
 create mode 100644 src/components/Input/types.ts

diff --git a/README.md b/README.md
index 8f6d7b0..6fbee16 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ Below is a list of the components available in this library. Each component has
 - [BBBCheckbox](./src/components/Checkbox/README.md)
 - [BBBDivider](./src/components/Divider/README.md)
 - [BBBHint](./src/components/Hint/README.md)
+- [BBBInput](./src/components/Input/README.md)
 - [BBBModal](./src/components/Modal//README.md)
 - [BBBNavigation](./src/components/Navigation/README.md)
 - [BBBSearch](./src/components/Search/README.md)
diff --git a/package.json b/package.json
index 9f3e200..c867055 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,13 @@
       "require": "./dist/components/Hint.js",
       "default": "./dist/components/Hint.js"
     },
+    "./Input": {
+      "types": "./dist/types/components/Input/index.d.ts",
+      "node": "./dist/components/Input.js",
+      "import": "./dist/esm/components/Input/index.js",
+      "require": "./dist/components/Input.js",
+      "default": "./dist/components/Input.js"
+    },
     "./Modal": {
       "types": "./dist/types/components/Modal/index.d.ts",
       "node": "./dist/components/Modal.js",
@@ -172,6 +179,9 @@
       "Hint": [
         "dist/types/components/Hint/index.d.ts"
       ],
+      "Input": [
+        "dist/types/components/Input/index.d.ts"
+      ],
       "Modal": [
         "dist/types/components/Modal/index.d.ts"
       ],
diff --git a/src/components/Input/README.md b/src/components/Input/README.md
new file mode 100644
index 0000000..873e6e9
--- /dev/null
+++ b/src/components/Input/README.md
@@ -0,0 +1,118 @@
+# BBBInput
+
+The `BBBInput` component provides a labeled, auto-growing text field with an inline action button. It unifies the recurring "text field + submit button" pattern used across chat, guest messages, breakouts and similar areas, modeled after the core chat text input.
+
+`BBBTextInput` and `BBBTextAreaInput` remain the right choice for standalone fields with no inline action button.
+
+## Usage Example
+
+### Basic usage — text field with a submit icon button
+```jsx
+import { BBBInput } from 'bbb-ui-components-react';
+import { MdSend } from 'react-icons/md';
+
+<BBBInput
+  label="Message"
+  placeholder="Type your message..."
+  buttonIcon={<MdSend />}
+  buttonAriaLabel="Send message"
+  onSubmit={(value) => handleSend(value)}
+/>
+```
+
+### With a text button label instead of an icon
+```jsx
+<BBBInput
+  label="Message to guests"
+  placeholder="Write something..."
+  buttonLabel="Send"
+  onSubmit={(value) => sendGuestMessage(value)}
+/>
+```
+
+### Controlled
+```jsx
+const [value, setValue] = useState('');
+
+<BBBInput
+  label="Message to rooms"
+  value={value}
+  onChange={setValue}
+  buttonIcon={<MdSend />}
+  buttonAriaLabel="Send message"
+  onSubmit={(submittedValue) => {
+    submitMessage(submittedValue);
+    setValue('');
+  }}
+/>
+```
+
+### With sent feedback
+```jsx
+<BBBInput
+  label="Message"
+  buttonIcon={<MdSend />}
+  buttonAriaLabel="Send message"
+  showSentFeedback
+  onSubmit={(value) => handleSend(value)}
+/>
+```
+
+### With extra actions around the submit button
+```jsx
+import { MdEmojiEmotions } from 'react-icons/md';
+
+<BBBInput
+  label="Message"
+  buttonIcon={<MdSend />}
+  buttonAriaLabel="Send message"
+  beforeButton={(
+    <button type="button" aria-label="Insert emoji" onClick={openEmojiPicker}>
+      <MdEmojiEmotions />
+    </button>
+  )}
+  onSubmit={(value) => handleSend(value)}
+/>
+```
+
+## Props
+
+| Property               | Type                                   | Default          | Description                                                                                          |
+| ----------------------- | --------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
+| `label`                 | `string`                                |                    | Label displayed above the field.                                                                       |
+| `placeholder`           | `string`                                |                    | Placeholder text displayed when the field is empty.                                                    |
+| `value`                 | `string`                                |                    | Controlled value. Enables controlled mode when provided together with `onChange`.                      |
+| `onChange`               | `(value: string) => void`               |                    | Called on every keystroke. Required in controlled mode.                                                |
+| `onSubmit`               | `(value: string) => void`               |                    | Called with the trimmed, non-empty value when the field is submitted. **Required.**                    |
+| `buttonIcon`             | `React.ReactNode`                       |                    | Icon rendered inside the action button.                                                                |
+| `buttonLabel`            | `string`                                |                    | Text label rendered by the action button, instead of (or alongside) `buttonIcon`.                       |
+| `buttonAriaLabel`        | `string`                                |                    | Accessible name for the action button. **Required** when only `buttonIcon` is set (no `buttonLabel`).   |
+| `buttonVariant`          | `'primary' \| 'secondary' \| 'tertiary' \| 'subtle'` | `'primary'` | Visual variant of the action button (same variants as the shared `Button`).                   |
+| `dataTest`               | `string`                                |                    | `data-test` attribute on the underlying `<textarea>` element.                                           |
+| `buttonDataTest`         | `string`                                |                    | `data-test` attribute on the action button.                                                             |
+| `beforeButton`           | `React.ReactNode`                        |                    | Extra content (icon, button, or any other element) rendered to the left of the action button.          |
+| `afterButton`            | `React.ReactNode`                        |                    | Extra content (icon, button, or any other element) rendered to the right of the action button.         |
+| `submitOnEnter`          | `boolean`                               | `true`             | When `true`, Enter submits (Shift+Enter inserts a newline). When `false`, only the button submits.      |
+| `showSentFeedback`       | `boolean`                               | `false`            | Shows `sentFeedbackContent` in place of `helperText` for `sentFeedbackDuration` after a successful submit. |
+| `sentFeedbackContent`    | `React.ReactNode`                       | `'Message sent'`   | Content rendered while the sent feedback is visible — accepts any node, not just plain text.            |
+| `sentFeedbackDuration`   | `number`                                | `2000`             | How long, in milliseconds, the sent feedback stays visible.                                             |
+| `disabled`               | `boolean`                               | `false`            | Disables the field and the action button.                                                               |
+| `error`                  | `boolean`                               | `false`            | Puts the field in an error state.                                                                       |
+| `helperText`             | `string`                                |                    | Helper text displayed below the field.                                                                  |
+| `minRows`                | `number`                                | `1`                | Minimum number of visible rows.                                                                         |
+| `maxRows`                | `number`                                | `3`                | Maximum number of rows before the field scrolls internally.                                             |
+| `maxLength`              | `number`                                |                    | Maximum character length, enforced natively by the underlying `<textarea>`.                             |
+| `autoFocus`              | `boolean`                               | `false`            | Focuses the field when the component mounts.                                                            |
+| `inputRef`               | `React.Ref<HTMLTextAreaElement>`         |                    | Ref forwarded to the underlying `<textarea>` element.                                                   |
+| `aria-label`             | `string`                                 |                    | Accessible name for the field, for cases with no visible `label`.                                       |
+| `aria-describedby`       | `string`                                 |                    | Extra `aria-describedby` id(s), combined with the helper/feedback text's own id when one is rendered.   |
+
+## Behavior Notes
+
+- **Field type**: the text field is a `<textarea>` that auto-grows from `minRows` to `maxRows` (default `3`) as content is typed, then scrolls internally past `maxRows` — same auto-grow behavior as the reference chat input, with a shorter default cap.
+- **Uncontrolled mode** (default): the component manages its own value, clearing and refocusing the field after a successful submit.
+- **Controlled mode**: when `value` + `onChange` are both provided, the parent owns the value entirely; clearing it after submit (if desired) is the consumer's responsibility, typically inside `onSubmit`.
+- **Empty submits are ignored**: submitting a blank or whitespace-only value is a no-op — the field never sends empty messages.
+- **Enter to submit**: with `submitOnEnter` (default `true`), Enter submits and Shift+Enter inserts a newline. With `submitOnEnter={false}`, Enter always inserts a newline and only clicking the button submits.
+- **Sent feedback** (`showSentFeedback`, opt-in): a synchronous UI affordance — it fires right after `onSubmit` is called, regardless of whether that call succeeds asynchronously. It's rendered with `role="status"` and `aria-live="polite"`, and accepts any `sentFeedbackContent` (a string, or a custom node).
+- The action button reuses the shared `Button` component (`size="sm"`) for both the icon-only and labeled cases, so it fits a single-line row instead of imposing the fixed dimensions of `Button`'s `circle`/`stacked` layouts.
diff --git a/src/components/Input/component.stories.tsx b/src/components/Input/component.stories.tsx
new file mode 100644
index 0000000..623e3de
--- /dev/null
+++ b/src/components/Input/component.stories.tsx
@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MdSend, MdCheckCircle, MdEmojiEmotions } from 'react-icons/md';
+import { VARIANT_VALUES, DEFAULT_VARIANT } from '../Button/constants';
+import BBBInput from './component';
+
+const plainIconButtonStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '1.5rem',
+  height: '1.5rem',
+  padding: 0,
+  border: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+};
+
+const meta = {
+  title: 'BBBInput',
+  component: BBBInput,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label displayed above the field.',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text displayed when the field is empty.',
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Text label rendered by the action button.',
+    },
+    buttonVariant: {
+      control: 'select',
+      options: VARIANT_VALUES,
+      description: `Visual variant of the action button. Allowed values: ${VARIANT_VALUES.join(', ')}.`,
+      table: { defaultValue: { summary: `${DEFAULT_VARIANT}` } },
+    },
+    dataTest: {
+      control: 'text',
+      description: '`data-test` attribute on the underlying `<textarea>` element.',
+    },
+    buttonDataTest: {
+      control: 'text',
+      description: '`data-test` attribute on the action button.',
+    },
+    submitOnEnter: {
+      control: 'boolean',
+      description: 'When true, Enter submits (Shift+Enter inserts a newline).',
+    },
+    showSentFeedback: {
+      control: 'boolean',
+      description: 'Shows a transient "sent" feedback after a successful submit.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the field and the action button.',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Puts the field in an error state.',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text displayed below the field.',
+    },
+    minRows: {
+      control: { type: 'number', min: 1, max: 5, step: 1 },
+      description: 'Minimum number of visible rows.',
+    },
+    maxRows: {
+      control: { type: 'number', min: 1, max: 10, step: 1 },
+      description: 'Maximum number of rows before the field scrolls internally.',
+    },
+  },
+} satisfies Meta<typeof BBBInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Basic uncontrolled usage — icon-only action button. */
+export const Default: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Type your message...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    dataTest: 'message-input',
+    buttonDataTest: 'send-message-button',
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** Action button rendered with a text label instead of an icon. */
+export const WithButtonLabel: Story = {
+  args: {
+    label: 'Message to guests',
+    placeholder: 'Write something...',
+    buttonLabel: 'Send',
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** The action button's variant defaults to `primary`, but any `Button` variant can be used. */
+export const WithButtonVariant: Story = {
+  args: {
+    label: 'Message to guests',
+    placeholder: 'Write something...',
+    buttonLabel: 'Send',
+    buttonVariant: 'secondary',
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** `beforeButton`/`afterButton` let extra actions (e.g. an emoji picker trigger) sit next to the submit button. */
+export const WithBeforeButton: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Type your message...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    beforeButton: (
+      <button
+        type="button"
+        aria-label="Insert emoji"
+        style={plainIconButtonStyle}
+        onClick={() => console.log('open emoji picker')}
+      >
+        <MdEmojiEmotions />
+      </button>
+    ),
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+const ControlledInput = (args: React.ComponentProps<typeof BBBInput>) => {
+  const [value, setValue] = useState('');
+  return (
+    <BBBInput
+      {...args}
+      value={value}
+      onChange={setValue}
+      onSubmit={(submittedValue) => {
+        console.log('onSubmit:', submittedValue);
+        setValue('');
+      }}
+    />
+  );
+};
+
+/** Controlled mode — parent manages the value. */
+export const Controlled: Story = {
+  render: (args) => <ControlledInput {...args} />,
+  args: {
+    label: 'Message to rooms',
+    placeholder: 'Message...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+  },
+};
+
+/** Shows a transient "Message sent" feedback below the field after submitting. */
+export const WithSentFeedback: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Type your message...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    showSentFeedback: true,
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** `sentFeedbackContent` accepts any node, not just plain text. */
+export const WithCustomSentFeedbackContent: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Type your message...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    showSentFeedback: true,
+    sentFeedbackContent: (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}>
+        <MdCheckCircle /> Delivered to all participants
+      </span>
+    ),
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** Enter always inserts a newline; only the button submits. */
+export const SubmitOnEnterDisabled: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Press Enter for a new line...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    submitOnEnter: false,
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** Error state, with helper text. */
+export const ErrorState: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Type your message...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    error: true,
+    helperText: 'Message could not be sent. Try again.',
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
+
+/** Disabled state. */
+export const Disabled: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Message disabled...',
+    buttonIcon: <MdSend />,
+    buttonAriaLabel: 'Send message',
+    disabled: true,
+    onSubmit: (value: string) => console.log('onSubmit:', value),
+  },
+};
diff --git a/src/components/Input/component.tsx b/src/components/Input/component.tsx
new file mode 100644
index 0000000..2bfb0d7
--- /dev/null
+++ b/src/components/Input/component.tsx
@@ -0,0 +1,192 @@
+import React, {
+  JSX, useCallback, useEffect, useId, useRef, useState,
+} from 'react';
+import Button from '../Button/component';
+import { SIZES } from '../Button/constants';
+import * as Styled from './styles';
+import { BBBInputProps } from './types';
+
+/**
+ * A labeled, auto-growing text field with an inline action button.
+ *
+ * Modeled after the core chat text input: unifies the recurring "text field +
+ * submit button" pattern used across chat, guest messages and breakouts.
+ * It supports both uncontrolled (default) and controlled usage, matching BBBSearch.
+ *
+ */
+function Input({
+  label,
+  placeholder,
+  value,
+  onChange,
+  onSubmit,
+  buttonIcon,
+  buttonLabel,
+  buttonAriaLabel,
+  buttonVariant = 'primary',
+  dataTest,
+  buttonDataTest,
+  beforeButton,
+  afterButton,
+  submitOnEnter = true,
+  showSentFeedback = false,
+  sentFeedbackContent = 'Message sent',
+  sentFeedbackDuration = 2000,
+  disabled = false,
+  error = false,
+  helperText,
+  minRows = 1,
+  maxRows = 3,
+  maxLength,
+  autoFocus = false,
+  inputRef,
+  id,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+}: BBBInputProps): JSX.Element {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState('');
+  const currentValue = isControlled ? (value ?? '') : internalValue;
+
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+
+  const internalRef = useRef<HTMLTextAreaElement | null>(null);
+  const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [isFeedbackVisible, setFeedbackVisible] = useState(false);
+
+  const setRefs = useCallback((node: HTMLTextAreaElement | null) => {
+    internalRef.current = node;
+    if (typeof inputRef === 'function') {
+      inputRef(node);
+    } else if (inputRef && 'current' in inputRef) {
+      (inputRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;
+    }
+  }, [inputRef]);
+
+  // Auto-grow the textarea between minRows and maxRows as content changes.
+  useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+
+    el.style.height = 'auto';
+    const computedStyle = window.getComputedStyle(el);
+    const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+    const verticalExtra = [
+      computedStyle.paddingTop,
+      computedStyle.paddingBottom,
+      computedStyle.borderTopWidth,
+      computedStyle.borderBottomWidth,
+    ].reduce((sum, cssValue) => sum + (parseFloat(cssValue) || 0), 0);
+
+    const minHeight = lineHeight * minRows + verticalExtra;
+    const maxHeight = lineHeight * maxRows + verticalExtra;
+    const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+
+    el.style.height = `${nextHeight}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+  }, [currentValue, minRows, maxRows]);
+
+  useEffect(() => () => {
+    if (feedbackTimeoutRef.current) clearTimeout(feedbackTimeoutRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (autoFocus && internalRef.current) {
+      internalRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const next = e.target.value;
+    if (isControlled) {
+      onChange?.(next);
+    } else {
+      setInternalValue(next);
+    }
+  }, [isControlled, onChange]);
+
+  const submit = useCallback(() => {
+    if (disabled) return;
+    const trimmed = currentValue.trim();
+    if (!trimmed) return;
+
+    onSubmit(trimmed);
+
+    if (!isControlled) {
+      setInternalValue('');
+    }
+    internalRef.current?.focus();
+
+    if (showSentFeedback) {
+      setFeedbackVisible(true);
+      if (feedbackTimeoutRef.current) clearTimeout(feedbackTimeoutRef.current);
+      feedbackTimeoutRef.current = setTimeout(() => setFeedbackVisible(false), sentFeedbackDuration);
+    }
+  }, [disabled, currentValue, onSubmit, isControlled, showSentFeedback, sentFeedbackDuration]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && submitOnEnter) {
+      e.preventDefault();
+      submit();
+    }
+  }, [submitOnEnter, submit]);
+
+  const showHelper = Boolean(helperText) || isFeedbackVisible;
+  const helperElementId = showHelper ? `${fieldId}-helper` : undefined;
+  const describedBy = [ariaDescribedBy, helperElementId].filter(Boolean).join(' ') || undefined;
+
+  // Default layout sizes itself from padding (size="sm"), so it fits a single-line
+  // row for both the icon-only and labeled cases — unlike the circle/stacked
+  // layouts, which are sized for standalone use.
+  const button = (
+    <Button
+      onClick={submit}
+      disabled={disabled}
+      size={SIZES.SMALL}
+      variant={buttonVariant}
+      dataTest={buttonDataTest}
+      label={buttonLabel}
+      ariaLabel={buttonAriaLabel}
+      iconStart={buttonIcon}
+    />
+  );
+
+  return (
+    <Styled.Wrapper>
+      {label && <Styled.Label htmlFor={fieldId}>{label}</Styled.Label>}
+      <Styled.FieldContainer $disabled={disabled} $error={error}>
+        <Styled.TextArea
+          ref={setRefs}
+          id={fieldId}
+          rows={minRows}
+          placeholder={placeholder}
+          value={currentValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          maxLength={maxLength}
+          data-test={dataTest}
+          aria-label={ariaLabel}
+          aria-describedby={describedBy}
+        />
+        {beforeButton}
+        {button}
+        {afterButton}
+      </Styled.FieldContainer>
+      {showHelper && (
+        <Styled.HelperText
+          id={helperElementId}
+          $success={isFeedbackVisible}
+          $error={!isFeedbackVisible && error}
+          role={isFeedbackVisible ? 'status' : undefined}
+          aria-live={isFeedbackVisible ? 'polite' : undefined}
+        >
+          {isFeedbackVisible ? sentFeedbackContent : helperText}
+        </Styled.HelperText>
+      )}
+    </Styled.Wrapper>
+  );
+}
+
+export default Input;
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
new file mode 100644
index 0000000..fc38d60
--- /dev/null
+++ b/src/components/Input/index.ts
@@ -0,0 +1 @@
+export { default as BBBInput } from './component';
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
new file mode 100644
index 0000000..ae34708
--- /dev/null
+++ b/src/components/Input/styles.ts
@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components';
+import {
+  colorBorderDefault,
+  colorBorderSelected,
+  colorBorderError,
+  colorTextDefault,
+  colorTextLight,
+  colorError,
+  colorSuccess,
+} from '../../stylesheets/pallete';
+import { borderRadiusDefault, spacingSmall, spacingMedium } from '../../stylesheets/sizing';
+import { fontSizeSmall } from '../../stylesheets/typography';
+import { StyledContainerProps, StyledHelperTextProps } from './types';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${spacingSmall};
+`;
+
+export const Label = styled.label`
+  color: ${colorTextDefault};
+  font-size: ${fontSizeSmall};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const FieldContainer = styled.div<StyledContainerProps>`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: ${spacingSmall} ${spacingMedium};
+  gap: ${spacingSmall};
+  border-radius: ${borderRadiusDefault};
+  border: 1px solid ${colorBorderDefault};
+  background-color: transparent;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus-within {
+    border-color: ${colorBorderSelected};
+    box-shadow: 0 0 0 3px var(--color-border-focus-ring, rgba(29, 101, 212, 0.15));
+  }
+
+  ${({ $error }) =>
+    $error &&
+    css`
+      border-color: ${colorBorderError};
+    `}
+
+  ${({ $disabled }) =>
+    $disabled &&
+    css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+`;
+
+export const TextArea = styled.textarea`
+  flex: 1;
+  min-width: 0;
+  resize: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: ${colorTextDefault};
+  font-family: inherit;
+  font-size: ${fontSizeSmall};
+  line-height: 1.5;
+  padding: 0;
+
+  &::placeholder {
+    color: ${colorTextLight};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+`;
+
+export const HelperText = styled.div<StyledHelperTextProps>`
+  color: ${colorTextDefault};
+  font-size: ${fontSizeSmall};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 0 ${spacingMedium};
+
+  ${({ $success }) =>
+    $success &&
+    css`
+      color: ${colorSuccess};
+    `}
+
+  ${({ $error }) =>
+    $error &&
+    css`
+      color: ${colorError};
+    `}
+`;
diff --git a/src/components/Input/types.ts b/src/components/Input/types.ts
new file mode 100644
index 0000000..8b7e8b1
--- /dev/null
+++ b/src/components/Input/types.ts
@@ -0,0 +1,108 @@
+import React from 'react';
+import { VARIANT_VALUES } from '../Button/constants';
+
+export type BBBInputButtonVariant = typeof VARIANT_VALUES[number];
+
+export interface BBBInputProps {
+  /** Label displayed above the field. */
+  label?: string;
+
+  /** Placeholder text displayed inside the field when it's empty. */
+  placeholder?: string;
+
+  /** Controlled value. When provided together with `onChange`, the component is fully controlled. */
+  value?: string;
+
+  /** Called on every keystroke. Required when using controlled mode (`value` prop). */
+  onChange?: (value: string) => void;
+
+  /** Called with the trimmed, non-empty value when the field is submitted. */
+  onSubmit: (value: string) => void;
+
+  /** Icon rendered inside the action button. */
+  buttonIcon?: React.ReactNode;
+
+  /** Text label rendered by the action button, instead of (or alongside) `buttonIcon`. */
+  buttonLabel?: string;
+
+  /**
+   * Accessible name for the action button. Falls back to `buttonLabel` when set.
+   * Required for the button to be accessible when only `buttonIcon` is provided.
+   */
+  buttonAriaLabel?: string;
+
+  /** Visual variant of the action button (same variants as the shared `Button`). @default 'primary' */
+  buttonVariant?: BBBInputButtonVariant;
+
+  /** `data-test` attribute on the underlying `<textarea>` element. */
+  dataTest?: string;
+
+  /** `data-test` attribute on the action button. */
+  buttonDataTest?: string;
+
+  /** Extra content (icon, button, or any other element) rendered to the left of the action button. */
+  beforeButton?: React.ReactNode;
+
+  /** Extra content (icon, button, or any other element) rendered to the right of the action button. */
+  afterButton?: React.ReactNode;
+
+  /**
+   * When `true`, pressing Enter submits the field (Shift+Enter still inserts a newline).
+   * When `false`, Enter always inserts a newline and only the button submits.
+   * @default true
+   */
+  submitOnEnter?: boolean;
+
+  /**
+   * When `true`, shows `sentFeedbackContent` in place of `helperText` for `sentFeedbackDuration`
+   * after a successful submit.
+   * @default false
+   */
+  showSentFeedback?: boolean;
+
+  /** Content rendered while the sent feedback is visible. @default 'Message sent' */
+  sentFeedbackContent?: React.ReactNode;
+
+  /** How long, in milliseconds, the sent feedback stays visible. @default 2000 */
+  sentFeedbackDuration?: number;
+
+  /** Disables the field and the action button. */
+  disabled?: boolean;
+
+  /** Puts the field in an error state. */
+  error?: boolean;
+
+  /** Helper text displayed below the field. */
+  helperText?: string;
+
+  /** Minimum number of visible rows. @default 1 */
+  minRows?: number;
+
+  /** Maximum number of rows before the field scrolls internally. @default 3 */
+  maxRows?: number;
+
+  /** Maximum character length, enforced natively by the underlying `<textarea>`. */
+  maxLength?: number;
+
+  /** Focuses the field when the component mounts. */
+  autoFocus?: boolean;
+
+  /** Ref forwarded to the underlying `<textarea>` element. */
+  inputRef?: React.Ref<HTMLTextAreaElement>;
+
+  id?: string;
+
+  'aria-label'?: string;
+
+  'aria-describedby'?: string;
+}
+
+export interface StyledContainerProps {
+  $disabled?: boolean;
+  $error?: boolean;
+}
+
+export interface StyledHelperTextProps {
+  $error?: boolean;
+  $success?: boolean;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 0929280..b5e6250 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ export { BBButton } from './Button';
 export { BBBCheckbox } from './Checkbox';
 export { BBBDivider } from './Divider';
 export { BBBHint } from './Hint';
+export { BBBInput } from './Input';
 export { BBBModal } from './Modal';
 export { BBBNavigation } from './Navigation';
 export { BBBSearch } from './Search';
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 6c7015b..c51f380 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -7,6 +7,7 @@ export default {
     Checkbox: './src/components/Checkbox/index.ts',
     Divider: './src/components/Divider/index.ts',
     Hint: './src/components/Hint/index.ts',
+    Input: './src/components/Input/index.ts',
     Modal: './src/components/Modal/index.ts',
     Navigation: './src/components/Navigation/index.ts',
     Search: './src/components/Search/index.ts',

From 734dad057cfb6c0705b19eb008a294901a977fd2 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Thu, 9 Jul 2026 19:50:51 -0300
Subject: [PATCH 2/2] feat(BBButton): add squared layout, use it as BBBInput's
 default submit button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The existing layouts don't fit a compact icon-only button next to a single
line of text: circle/stacked are fixed-size boxes (3rem/4.5rem) that make
the row taller than the text line dictates, and default layout's
border-radius reads as nearly round at small sizes. squared is icon-only,
sized by its own equal padding (not a fixed box), with a smaller border
radius so it reads as squared rather than round — matching the real chat
input's send button shape, which BBBInput now uses by default for
icon-only submissions.
---
 src/components/Button/README.md             | 13 +++++++++--
 src/components/Button/component.stories.tsx | 24 ++++++++++++++++++++-
 src/components/Button/component.tsx         |  2 +-
 src/components/Button/constants.ts          |  1 +
 src/components/Button/styles.ts             | 15 +++++++++++++
 src/components/Button/type.ts               |  7 +++++-
 src/components/Input/README.md              |  2 +-
 src/components/Input/component.tsx          | 21 +++++++++++++-----
 8 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index 9438bcd..50b6299 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -1,6 +1,6 @@
 # BBButton
 
-The `BBButton` component is a versatile button that supports multiple layouts and styles. It can be rendered as a standard inline button, a circular icon button, or a stacked button with an icon and a label.
+The `BBButton` component is a versatile button that supports multiple layouts and styles. It can be rendered as a standard inline button, a circular icon button, a compact squared icon button, or a stacked button with an icon and a label.
 
 ![Demo](assets/example.png)
 
@@ -33,6 +33,15 @@ import { MdFavorite } from 'react-icons/md';
 <BBButton layout="circle" icon={<MdFavorite />} tooltipLabel="Favorite" onClick={() => (console.log('clicked'))}/>
 ```
 
+### Squared Button
+
+```jsx
+import { BBButton } from 'bbb-ui-components-react';
+import { MdSend } from 'react-icons/md';
+
+<BBButton layout="squared" icon={<MdSend />} ariaLabel="Send" onClick={() => (console.log('clicked'))}/>
+```
+
 ### Stacked Button
 
 ```jsx
@@ -62,7 +71,7 @@ import { MdPlayArrow } from 'react-icons/md';
 | `layout`           | `keyof typeof LAYOUTS`                                            | `'default'`       | The layout of the button.                                              |
 | `disabled`         | `boolean`                                                         | `false`           | If `true`, the button will be disabled.                                |
 | `children`         | `React.ReactNode`                                                 |                   | The content of the button, typically used for the 'default' layout.    |
-| `icon`             | `React.ReactNode`                                                 |                   | The icon to be displayed. Used for 'circle' and 'stacked' layouts.     |
+| `icon`             | `React.ReactNode`                                                 |                   | The icon to be displayed. Used for 'circle', 'squared' and 'stacked' layouts. |
 | `iconStart`        | `React.ReactNode`                                                 |                   | The icon to be displayed at the start of the button. Used for 'default' layout.|
 | `iconEnd`          | `React.ReactNode`                                                 |                   | The icon to be displayed at the end of the button. Used for 'default' layout. |
 | `helperIcon`       | `React.ReactNode`                                                 |                   | The auxiliary icon to be displayed. Used for 'stacked' layout.         |
diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx
index 12a4806..d393508 100644
--- a/src/components/Button/component.stories.tsx
+++ b/src/components/Button/component.stories.tsx
@@ -69,7 +69,7 @@ const meta = {
     },
     icon: {
       control: false,
-      description: `Main icon for the button. Commonly used for icon-only buttons (layout 'circle') or in 'stacked' layout. When using a label, prefer \`iconStart\` or \`iconEnd\` in the 'default' layout.`,
+      description: `Main icon for the button. Commonly used for icon-only buttons (layouts 'circle' and 'squared') or in 'stacked' layout. When using a label, prefer \`iconStart\` or \`iconEnd\` in the 'default' layout.`,
       table: { defaultValue: { summary: 'null' } },
     },
     iconStart: {
@@ -247,6 +247,28 @@ export const Circle: Story = {
   ),
 };
 
+export const Squared: Story = {
+  name: 'Squared',
+  args: {
+    tooltipPlacement: 'top',
+    variant: 'primary',
+    layout: 'squared',
+    icon: <MdFavorite size="1.25rem" />,
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      {COLOR_VALUES.map((color) => (
+        <BBButton
+          {...args}
+          key={color}
+          color={color}
+          tooltipLabel={`Squared ${color.charAt(0).toUpperCase() + color.slice(1)}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
 export const WithIcon: Story = {
   args: {
     label: 'Like',
diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx
index bb96125..1869686 100644
--- a/src/components/Button/component.tsx
+++ b/src/components/Button/component.tsx
@@ -53,7 +53,7 @@ function Button(props: ButtonProps): JSX.Element {
   if (ariaDescribedBy) accessibilityProps['aria-describedby'] = ariaDescribedBy;
 
   const buttonElement = (() => {
-    if (props.layout === LAYOUTS.CIRCLE) {
+    if (props.layout === LAYOUTS.CIRCLE || props.layout === LAYOUTS.SQUARED) {
       const { icon } = props;
       const testId = dataTest || `button-${id || 'default'}`;
 
diff --git a/src/components/Button/constants.ts b/src/components/Button/constants.ts
index 7deb88f..f0fe7ea 100644
--- a/src/components/Button/constants.ts
+++ b/src/components/Button/constants.ts
@@ -46,6 +46,7 @@ const LAYOUTS = {
   DEFAULT: 'default',
   STACKED: 'stacked',
   CIRCLE: 'circle',
+  SQUARED: 'squared',
 } as const;
 const LAYOUT_VALUES = Object.values(LAYOUTS);
 const DEFAULT_LAYOUT = LAYOUT_VALUES[0];
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index 25256a8..5683fba 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -15,6 +15,7 @@ import {
 } from './type';
 import {
   borderRadiusDefault,
+  borderRadiusSmall,
   spacingSmall,
 } from '../../stylesheets/sizing';
 import { colorBorderDefault, colorTextDefault } from '../../stylesheets/pallete';
@@ -129,6 +130,18 @@ const circleLayoutStyles = css`
   align-items: center;
 `;
 
+// Icon-only, sized by its own (equal, non-text) padding rather than a fixed
+// box — stays compact next to a single line of text instead of forcing a
+// fixed height like circle/stacked do.
+const squaredLayoutStyles = css`
+  border-radius: ${borderRadiusSmall};
+  aspect-ratio: 1;
+  padding: ${spacingSmall};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const defaultLayoutStyles = css`
   display: inline-flex;
   justify-content: center;
@@ -156,6 +169,8 @@ export const Button = styled.button<StyledButtonProps>`
         return stackedLayoutStyles;
       case LAYOUTS.CIRCLE:
         return circleLayoutStyles;
+      case LAYOUTS.SQUARED:
+        return squaredLayoutStyles;
       default:
         return defaultLayoutStyles;
     }
diff --git a/src/components/Button/type.ts b/src/components/Button/type.ts
index a48b355..29857ef 100644
--- a/src/components/Button/type.ts
+++ b/src/components/Button/type.ts
@@ -97,4 +97,9 @@ type CircleLayoutProps = BaseButtonProps & {
   icon?: React.ReactNode;
 };
 
-export type ButtonProps = DefaultLayoutProps | StackedLayoutProps | CircleLayoutProps;
+type SquaredLayoutProps = BaseButtonProps & {
+  layout: typeof LAYOUTS.SQUARED;
+  icon?: React.ReactNode;
+};
+
+export type ButtonProps = DefaultLayoutProps | StackedLayoutProps | CircleLayoutProps | SquaredLayoutProps;
diff --git a/src/components/Input/README.md b/src/components/Input/README.md
index 873e6e9..f8ac888 100644
--- a/src/components/Input/README.md
+++ b/src/components/Input/README.md
@@ -115,4 +115,4 @@ import { MdEmojiEmotions } from 'react-icons/md';
 - **Empty submits are ignored**: submitting a blank or whitespace-only value is a no-op — the field never sends empty messages.
 - **Enter to submit**: with `submitOnEnter` (default `true`), Enter submits and Shift+Enter inserts a newline. With `submitOnEnter={false}`, Enter always inserts a newline and only clicking the button submits.
 - **Sent feedback** (`showSentFeedback`, opt-in): a synchronous UI affordance — it fires right after `onSubmit` is called, regardless of whether that call succeeds asynchronously. It's rendered with `role="status"` and `aria-live="polite"`, and accepts any `sentFeedbackContent` (a string, or a custom node).
-- The action button reuses the shared `Button` component (`size="sm"`) for both the icon-only and labeled cases, so it fits a single-line row instead of imposing the fixed dimensions of `Button`'s `circle`/`stacked` layouts.
+- **Action button shape**: when only `buttonIcon` is set (no `buttonLabel`), the action button uses `Button`'s `squared` layout — a compact, icon-only button matching the real chat input's send button (squared corners, not round, sized by its own padding rather than a fixed box). When `buttonLabel` is set, it falls back to `Button`'s default layout (`size="sm"`), which is the one that renders a text label.
diff --git a/src/components/Input/component.tsx b/src/components/Input/component.tsx
index 2bfb0d7..d42c66b 100644
--- a/src/components/Input/component.tsx
+++ b/src/components/Input/component.tsx
@@ -2,7 +2,7 @@ import React, {
   JSX, useCallback, useEffect, useId, useRef, useState,
 } from 'react';
 import Button from '../Button/component';
-import { SIZES } from '../Button/constants';
+import { SIZES, LAYOUTS } from '../Button/constants';
 import * as Styled from './styles';
 import { BBBInputProps } from './types';
 
@@ -136,10 +136,11 @@ function Input({
   const helperElementId = showHelper ? `${fieldId}-helper` : undefined;
   const describedBy = [ariaDescribedBy, helperElementId].filter(Boolean).join(' ') || undefined;
 
-  // Default layout sizes itself from padding (size="sm"), so it fits a single-line
-  // row for both the icon-only and labeled cases — unlike the circle/stacked
-  // layouts, which are sized for standalone use.
-  const button = (
+  // Icon-only submissions (the common case) use Button's `squared` layout — a
+  // compact, icon-only button matching the real chat input's send button shape.
+  // When a text label is provided instead, fall back to the default layout,
+  // which is the one that actually renders a label.
+  const button = buttonLabel ? (
     <Button
       onClick={submit}
       disabled={disabled}
@@ -150,6 +151,16 @@ function Input({
       ariaLabel={buttonAriaLabel}
       iconStart={buttonIcon}
     />
+  ) : (
+    <Button
+      layout={LAYOUTS.SQUARED}
+      onClick={submit}
+      disabled={disabled}
+      variant={buttonVariant}
+      dataTest={buttonDataTest}
+      icon={buttonIcon}
+      ariaLabel={buttonAriaLabel}
+    />
   );
 
   return (