import { type AsChildChildren } from '@wix/headless-utils/react';
import React from 'react';
import type { CommentWithResolvedFields } from '../services/comments-service.js';
export interface RootProps {
    asChild?: boolean;
    className?: string;
    maxLength?: number;
    onCommentAdded?: () => void;
    children?: AsChildChildren<{
        createComment: (content: string) => Promise<CommentWithResolvedFields | null>;
        isLoading: boolean;
        error: string | null;
        commentText: string;
        setCommentText: (text: string) => void;
        handleSubmit: (e: React.FormEvent) => Promise<void>;
        handleCancel: () => void;
    }> | React.ReactNode;
}
/**
 * Form component for creating comments.
 * Provides context for sub-components to share form state.
 * Must contain composable sub-components as children.
 *
 * @component
 * @example
 * ```tsx
 * // Composable form with sub-components
 * <Comment.Form.Root className="space-y-3">
 *   <Comment.Form.Input
 *     className="w-full border rounded-lg p-3"
 *     placeholder="Write your reply..."
 *   />
 *   <Comment.Form.Message className="text-red-600" />
 *   <Comment.Form.SubmitButton className="btn-primary" />
 * </Comment.Form.Root>
 *
 * // Custom rendering with asChild
 * <Comment.Form.Root asChild>
 *   {({ createComment, isLoading, error, commentText, setCommentText, handleSubmit, handleCancel }) => (
 *     <CustomCommentForm
 *       onCommentAdded={onCommentAdded}
 *       loading={isLoading}
 *       error={error}
 *       commentText={commentText}
 *       setCommentText={setCommentText}
 *       handleSubmit={handleSubmit}
 *       handleCancel={handleCancel}
 *     />
 *   )}
 * </Comment.Form.Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
export interface LabelProps {
    asChild?: boolean;
    className?: string;
    children?: AsChildChildren<{
        htmlFor: string;
        labelText: string;
    }> | React.ReactNode;
}
/**
 * Label component for comment form input.
 *
 * @component
 * @example
 * ```tsx
 * // Default label
 * <Comment.Form.Label />
 *
 * // Custom styling
 * <Comment.Form.Label className="text-gray-700 font-medium mb-2" />
 *
 * // Custom rendering with asChild
 * <Comment.Form.Label asChild>
 *   {({ htmlFor, labelText }) => (
 *     <label htmlFor={htmlFor} className="custom-label">
 *       {labelText}
 *     </label>
 *   )}
 * </Comment.Form.Label>
 * ```
 */
export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
export interface InputProps {
    asChild?: boolean;
    className?: string;
    placeholder?: string;
    rows?: number;
    children?: AsChildChildren<{
        value: string;
        onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
        disabled: boolean;
        placeholder?: string;
        maxLength: number;
        id: string;
    }> | React.ReactNode;
}
/**
 * Input component for form textarea.
 *
 * @component
 * @example
 * ```tsx
 * // Default textarea
 * <Comment.Form.Input placeholder="Write your comment..." />
 *
 * // Custom styling
 * <Comment.Form.Input
 *   className="w-full h-24 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
 *   placeholder="Write your comment..."
 *   rows={3}
 * />
 *
 * // Custom rendering with asChild
 * <Comment.Form.Input asChild>
 *   {({ value, onChange, disabled, placeholder, maxLength, id }) => (
 *     <RichTextEditor
 *       id={id}
 *       value={value}
 *       onChange={onChange}
 *       disabled={disabled}
 *       placeholder={placeholder}
 *       maxLength={maxLength}
 *     />
 *   )}
 * </Comment.Form.Input>
 * ```
 */
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLElement>>;
export interface MessageProps {
    asChild?: boolean;
    className?: string;
    children?: AsChildChildren<{
        error: string;
        hasError: boolean;
    }> | React.ReactNode;
}
/**
 * Error message display component for comment form.
 *
 * @component
 * @example
 * ```tsx
 * // Default error display
 * <Comment.Form.Message />
 *
 * // Custom styling
 * <Comment.Form.Message className="text-red-600 text-sm bg-red-50 p-2 rounded" />
 *
 * // Custom rendering with asChild
 * <Comment.Form.Message asChild>
 *   {({ error, hasError }) => (
 *     hasError && <CustomErrorAlert message={error} />
 *   )}
 * </Comment.Form.Message>
 * ```
 */
export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLElement>>;
export interface CancelButtonProps {
    asChild?: boolean;
    className?: string;
    children?: AsChildChildren<{
        isDisabled: boolean;
        isLoading: boolean;
        handleCancel: () => void;
    }> | React.ReactNode;
}
/**
 * Cancel button for the comment form.
 * Clears the form input when clicked.
 *
 * @component
 * @example
 * ```tsx
 * // Default rendering
 * <Comment.Form.CancelButton />
 *
 * // Custom rendering with asChild
 * <Comment.Form.CancelButton asChild>
 *   {({ handleCancel }) => (
 *     <Button variant="ghost" onClick={handleCancel}>
 *       Cancel
 *     </Button>
 *   )}
 * </Comment.Form.CancelButton>
 * ```
 */
export declare const CancelButton: React.ForwardRefExoticComponent<CancelButtonProps & React.RefAttributes<HTMLElement>>;
export interface SubmitButtonProps {
    asChild?: boolean;
    className?: string;
    loadingState?: React.ReactNode;
    children?: AsChildChildren<{
        isDisabled: boolean;
        isLoading: boolean;
        onClick: (e: React.FormEvent) => Promise<void>;
    }> | React.ReactNode;
}
/**
 * Submit button for the comment form.
 * Automatically disabled when the form is empty or submitting.
 *
 * @component
 * @example
 * ```tsx
 * // Default rendering
 * <Comment.Form.SubmitButton />
 *
 * // Custom rendering with asChild
 * <Comment.Form.SubmitButton asChild>
 *   <Button>Post reply</Button>
 * </Comment.Form.SubmitButton>
 * ```
 */
export declare const SubmitButton: React.ForwardRefExoticComponent<SubmitButtonProps & React.RefAttributes<HTMLElement>>;