import { ComponentPropsWithoutRef } from 'react';
import { LayoutUtilProps } from '../../types';
/**
 * Props for the EditCard component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends LayoutUtilProps
 */
export type EditCardProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
    /**
     * The header text to display. Can be a string or an object mapping states to different text.
     */
    headerText: string | {
        "not started": string;
        "in progress": string;
        error: string;
        complete: string;
    };
    /**
     * The current state of the edit card.
     */
    state: EditCardState;
    /**
     * Text to display on the save button.
     * @default "Save"
     */
    saveButtonText?: string;
    /**
     * Text to display on the edit button.
     * @default "Edit"
     */
    editButtonText?: string;
    /**
     * Whether to disable the edit button.
     * @default false
     */
    disableEdit?: boolean;
    /**
     * Whether to disable the save button.
     * @default false
     */
    disableSave?: boolean;
    /**
     * Callback function called when the state changes.
     */
    onStateChange?: (changeType: EditCardChange) => void;
};
/**
 * The type of state change that can occur.
 * @property {"edit"} edit - User clicked the edit button to start editing
 * @property {"save"} save - User clicked the save button to save changes
 * @property {"cancel"} cancel - User clicked the cancel button to discard changes
 */
export type EditCardChange = "edit" | "save" | "cancel";
/**
 * The current state of the edit card.
 * @property {"not started"} not started - Initial state, content is not being edited
 * @property {"in progress"} in progress - User is currently editing the content
 * @property {"error"} error - An error occurred during the edit process
 * @property {"complete"} complete - Edit was successfully completed
 */
export type EditCardState = "not started" | "in progress" | "error" | "complete";
/**
 * EditCard component for managing editable content with different states and actions.
 *
 * Features:
 * - Four distinct states: not started, in progress, error, and complete
 * - Visual indicators for each state with appropriate icons
 * - Dynamic header text that can change based on state
 * - Edit and save buttons with customizable text
 * - Optional button disabling for different states
 * - State change callbacks for handling user interactions
 * - Built on Card component with consistent styling
 * - Supports layout utilities for positioning and spacing
 * - Accessible with proper ARIA attributes
 * - Visual state indicators with color-coded borders
 * - Automatic tracking ID generation for analytics
 *
 * @example
 * <EditCard
 *   headerText="User Profile"
 *   state="not started"
 *   onStateChange={(change) => console.log(change)}
 * >
 *   <Text>Profile information goes here</Text>
 * </EditCard>
 */
export declare const EditCard: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
    /**
     * The header text to display. Can be a string or an object mapping states to different text.
     */
    headerText: string | {
        "not started": string;
        "in progress": string;
        error: string;
        complete: string;
    };
    /**
     * The current state of the edit card.
     */
    state: EditCardState;
    /**
     * Text to display on the save button.
     * @default "Save"
     */
    saveButtonText?: string;
    /**
     * Text to display on the edit button.
     * @default "Edit"
     */
    editButtonText?: string;
    /**
     * Whether to disable the edit button.
     * @default false
     */
    disableEdit?: boolean;
    /**
     * Whether to disable the save button.
     * @default false
     */
    disableSave?: boolean;
    /**
     * Callback function called when the state changes.
     */
    onStateChange?: (changeType: EditCardChange) => void;
} & import('react').RefAttributes<HTMLDivElement>>;