import { TNode, Value } from '@tempots/dom';
/**
 * A visual indicator (asterisk) appended to labels for required fields.
 *
 * Renders as a red asterisk (" *") with the `bc-input-wrapper__required` class.
 */
export declare const RequiredSymbol: import("@tempots/dom").Renderable;
/**
 * Layout modes for the input wrapper structure.
 *
 * - `'vertical'` - Label above input (default)
 * - `'horizontal'` - Label and input side-by-side with flexible label width
 * - `'horizontal-label-right'` - Label on the right side of the input
 * - `'horizontal-fixed'` - Label on the left with fixed width (use `labelWidth` option)
 */
export type InputWrapperLayout = 'vertical' | 'horizontal' | 'horizontal-label-right' | 'horizontal-fixed';
/**
 * Configuration options for the `InputWrapper` component.
 *
 * This type defines all the options for wrapping an input with label, description,
 * error message, and contextual information. It's used by form controls and
 * standalone inputs to provide consistent labeling and error display.
 */
export type InputWrapperOptions = {
    /** Whether the wrapper should take full width of its container */
    fullWidth?: Value<boolean>;
    /** Label text or node to display above/beside the input */
    label?: TNode;
    /** Additional content to render after the label (e.g., badges, tooltips) */
    labelChildren?: TNode;
    /** Contextual information displayed in the header area (e.g., character count) */
    context?: TNode;
    /** Helpful description text displayed below the input (or under label in horizontal layouts) */
    description?: TNode;
    /** Error message to display when the input has a validation error */
    error?: TNode;
    /** Whether the input is required (adds asterisk to label) */
    required?: Value<boolean>;
    /** The actual input element or control to wrap */
    content: TNode;
    /** ID of the input element for the label's `for` attribute */
    labelFor?: Value<string>;
    /** Whether the input has a validation error (applies error styling) */
    hasError?: Value<boolean>;
    /** Whether the input is disabled (applies disabled styling to label) */
    disabled?: Value<boolean>;
    /** Layout mode for label and input positioning */
    layout?: Value<InputWrapperLayout>;
    /** CSS width value for label in 'horizontal-fixed' layout (e.g., '120px', '10rem') */
    labelWidth?: Value<string>;
};
/**
 * Wraps an input element with label, description, error message, and accessibility attributes.
 *
 * This is the primary wrapper component used by all form controls in BeatUI. It provides:
 * - Label with optional required indicator (asterisk)
 * - Contextual information (e.g., character count)
 * - Description text for additional guidance
 * - Error message display with ARIA live region announcements
 * - Proper accessibility attributes (aria-describedby, aria-invalid, role="alert")
 * - Multiple layout modes (vertical, horizontal, horizontal-label-right, horizontal-fixed)
 * - Automatic ID generation for linking label, description, and error to the input
 *
 * The component handles state styling (error, disabled) and ensures screen readers
 * receive appropriate context through ARIA attributes.
 *
 * @param options - Configuration options for the wrapper
 * @param options.content - The input element or control to wrap (required)
 * @param options.label - Label text or node
 * @param options.description - Help text displayed below the input
 * @param options.error - Error message (automatically sets hasError to true)
 * @param options.required - Whether to show the required asterisk
 * @param options.labelFor - ID of the input element
 * @param options.hasError - Whether to apply error styling
 * @param options.disabled - Whether to apply disabled styling
 * @param options.layout - Layout mode (default: 'vertical')
 * @param options.labelWidth - Fixed width for label in 'horizontal-fixed' layout
 * @param options.context - Contextual info in the header (e.g., character count)
 * @param options.labelChildren - Additional content after the label
 * @param options.fullWidth - Whether to take full container width
 * @param children - Additional nodes to append to the wrapper
 * @returns A div element with the complete input wrapper structure
 *
 * @example
 * ```ts
 * InputWrapper({
 *   label: 'Email',
 *   description: 'We will never share your email',
 *   required: true,
 *   labelFor: 'email-input',
 *   content: html.input(attr.type('email'), attr.id('email-input')),
 *   error: prop<string | undefined>(undefined),
 *   layout: 'vertical'
 * })
 * ```
 */
export declare const InputWrapper: ({ fullWidth, required, label, labelChildren, context, description, content, error, labelFor, hasError, disabled, layout, labelWidth, }: InputWrapperOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;
