/**
 * @file ChatComposer.tsx
 * @input Uses React, StyleX, BaseProps
 * @output Exports ChatComposer layout shell component
 * @position Core implementation; consumed by index.ts
 *
 * Layout shell for a chat composer. Arranges slots (drawer, header,
 * input, footer actions, send button, status) in a vertical stack with
 * page-radius container, hover/focus shadows, and concentric inner radius.
 *
 * Component CSS vars (themeable via defineTheme):
 * - `--_chat-composer-radius` (default: --radius-chat) — outer border radius
 * - `--_chat-composer-padding` (default: --spacing-3) — body padding
 * - Inner element radius = calc(--_chat-composer-radius - --_chat-composer-padding)
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Chat/Chat.doc.mjs
 * - /apps/storybook/stories/ChatComposer.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/ChatComposer/ (block examples)
 */
import React, { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
export type ChatComposerStatus = {
    type: 'error' | 'warning';
    message?: string;
};
export type ChatComposerDensity = 'compact' | 'balanced' | 'spacious';
export interface ChatComposerProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' | 'onSubmit'> {
    ref?: React.Ref<HTMLDivElement>;
    /** Called when the user submits the message */
    onSubmit: (value: string) => void;
    /** Called when the user clicks the stop button */
    onStop?: () => void;
    /** Whether the stop button is shown instead of the send button. @default false */
    isStopShown?: boolean;
    /** Controlled value of the input */
    value?: string;
    /** Called when the input value changes */
    onChange?: (value: string) => void;
    /** Placeholder text for the input */
    placeholder?: string;
    /** Whether the composer is disabled */
    isDisabled?: boolean;
    /** Density variant */
    density?: ChatComposerDensity;
    /**
     * Resting elevation of the composer body. `low` (the default) keeps today's
     * raised look — low at rest, bumping to med on hover / focus. `none` flattens
     * it and draws a border with the same rest / hover / focus treatment as a
     * text input (emphasized border → accent on focus, with matching inset rings).
     * @default 'low'
     */
    elevation?: 'none' | 'low';
    /** Collapsible drawer rendered above the input — attachments, context chips, etc. Use ChatComposerDrawer. */
    drawer?: ReactNode;
    /** Actions rendered on the left side of the header (e.g. attach, mention buttons). Use icon-only `size="sm"` buttons. */
    headerActions?: ReactNode;
    /** Contextual info rendered on the right side of the header (e.g. context window usage, ProgressBar). */
    headerContext?: ReactNode;
    /** Custom input element — replaces the default textarea */
    input?: ReactNode;
    /** Actions rendered on the left side of the footer. Use `size="md"` buttons to match the send button height. */
    footerActions?: ReactNode;
    /** Actions rendered to the left of the send button. Use `size="md"` buttons to match the send button height. */
    sendActions?: ReactNode;
    /** Custom send button — replaces the default */
    sendButton?: ReactNode;
    /** Status message rendered below (or above) the composer body */
    status?: ChatComposerStatus;
    /** Where to render the status. @default 'bottom' */
    statusPosition?: 'top' | 'bottom';
}
/**
 * Layout shell for a chat composer with slots for drawer, input,
 * actions, and a send button.
 *
 * @example
 * ```
 * <ChatComposer
 *   onSubmit={(value) => console.log(value)}
 *   placeholder="Type a message..."
 * />
 * ```
 */
export declare function ChatComposer(props: ChatComposerProps): React.JSX.Element;
export declare namespace ChatComposer {
    var displayName: string;
}
//# sourceMappingURL=ChatComposer.d.ts.map