Composer

Exports

Import these components from @mbsw/ui.

Composer

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Composer

Composer props
Prop	Type	Requirement
`defaultValue`	`string`	Optional
`disabled`	`boolean`	Optional
`onSend` Receives the untrimmed value. Sending never clears or blurs the input.	`((value: string) => void)`	Optional
`onValueChange`	`((value: string) => void)`	Optional
`sendButtonProps`	`ComposerSendButtonProps`	Optional
`sendLabel`	`string`	Optional
`textareaProps`	`ComposerTextareaProps`	Optional
`value`	`string`	Optional
`variant`	`'default' \| 'reply'`	Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ButtonHTMLAttributes, type HTMLAttributes, type RefAttributes, type TextareaHTMLAttributes } from 'react';

export type ComposerVariant = 'default' | 'reply';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type ComposerTextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'defaultValue' | 'disabled' | 'value'> & RefAttributes<HTMLTextAreaElement> & DataAttributes;

export type ComposerSendButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'type'> & RefAttributes<HTMLButtonElement> & DataAttributes;

export type ComposerProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> & DataAttributes & {
    defaultValue?: string;
    disabled?: boolean;
    /** Receives the untrimmed value. Sending never clears or blurs the input. */
    onSend?: (value: string) => void;
    onValueChange?: (value: string) => void;
    sendButtonProps?: ComposerSendButtonProps;
    sendLabel?: string;
    textareaProps?: ComposerTextareaProps;
    value?: string;
    variant?: ComposerVariant;
};

export declare const Composer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & DataAttributes & {
    defaultValue?: string;
    disabled?: boolean;
    /** Receives the untrimmed value. Sending never clears or blurs the input. */
    onSend?: (value: string) => void;
    onValueChange?: (value: string) => void;
    sendButtonProps?: ComposerSendButtonProps;
    sendLabel?: string;
    textareaProps?: ComposerTextareaProps;
    value?: string;
    variant?: ComposerVariant;
} & RefAttributes<HTMLDivElement>>;