import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
import { ReactElement, ReactNode } from "react";
export interface FormGroupProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
    /**
     * The label for the form group.
     */
    label?: string | ReactNode;
    /**
     * Content to display in the tooltip when hovering the ? icon next to the label.
     */
    tip?: string | ReactNode;
    /**
     * The `id` of the input element this form group labels. Used to associate the `<label>` with the input via `for` attribute.
     */
    htmlFor?: string;
    /**
     * A string to display under the input element to help the user understand the input.
     */
    helpText?: string | null;
    /**
     * An addon element to render to the right under the input element.
     * Used for displaying maxLength etc.
     */
    helpAddon?: string | ReactNode;
    /**
     * If true the input is rendered in its invalid state.
     */
    isInvalid?: boolean;
    /**
     * The input or field element to render inside the form group, below the label and above the help text.
     */
    children?: ReactNode;
    /**
     * The name of the form field. Passed through to child input components for form submission.
     */
    name?: string;
    /**
     * If true the input is required with an asterisk prepended to the label.
     */
    required?: boolean;
    /**
     * If true the input is rendered in its warning state.
     * This is used for when the input is valid but the user should be aware of something.
     */
    isWarning?: boolean;
}
/**
 * FormGroup wraps an input element with a label, optional tooltip, help text, and validation styling.
 * It provides consistent form field layout and is used internally by all Field components
 * (`TextField`, `CheckboxField`, `TimeRangeField`, etc.).
 *
 * ### When to use
 * Use FormGroup when building a custom field component that needs a label, tooltip, or help text.
 *
 * ### When not to use
 * Do not use FormGroup directly for standard inputs — use the corresponding Field component
 * (e.g., `TextField`, `CheckboxField`) which already wraps FormGroup.
 *
 * @example Custom field with label, tooltip, and help text
 * ```tsx
 * import { FormGroup } from "@trackunit/react-form-components";
 *
 * const CustomColorField = () => (
 *   <FormGroup label="Brand color" tip="Used across the dashboard" helpText="Enter a hex color code">
 *     <input type="color" />
 *   </FormGroup>
 * );
 * ```
 * @param {FormGroupProps} props - The props for the FormGroup component
 * @returns {ReactElement} FormGroup component
 */
export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, style, ref, }: FormGroupProps) => ReactElement;