import { default as React } from 'react';
/**
 * Props interface for the InputInline component
 *
 * InputInline is a specialized input component that provides inline editing capabilities,
 * allowing users to click on text to edit it directly without a separate input field.
 */
export interface InputInlineProps {
    /**
     * Unique identifier for the input element
     * Used for accessibility and form handling
     *
     * @example "user-name-input"
     */
    id?: string;
    /**
     * The type of input field to render
     * Determines the input behavior and validation
     *
     * @example "text" - For general text input
     * @example "password" - For password fields (masks input)
     * @example "email" - For email addresses (provides email validation)
     */
    type: "text" | "password" | "email";
    /**
     * Helper text displayed below the input
     * Provides additional context or instructions to the user
     *
     * @example "Enter your full name as it appears on your ID"
     */
    assistiveText?: string;
    /**
     * Placeholder text shown when the input is empty
     * Provides a hint about what should be entered
     *
     * @example "Enter your username"
     */
    placeholder?: string;
    /**
     * Whether the input is disabled and non-interactive
     * When true, the input cannot be focused or modified
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * The current value of the input field
     * This makes the component controlled
     *
     * @example "John Doe"
     */
    value?: string;
    /**
     * Maximum number of characters allowed in the input
     * Prevents users from entering more characters than specified
     *
     * @example 50 - Limits input to 50 characters
     */
    maxLength?: number;
    /**
     * Custom CSS styles to apply to the input container
     * Overrides default styling for layout and appearance
     *
     * @example { width: '200px', backgroundColor: '#f5f5f5' }
     */
    style?: React.CSSProperties;
    /**
     * Custom CSS styles to apply to the displayed value
     * Used when the input is in view mode (not editing)
     *
     * @example { fontWeight: 'bold', color: '#333' }
     */
    valueStyle?: React.CSSProperties;
    /**
     * Additional CSS class names to apply to the component
     * Allows for custom styling through CSS classes
     *
     * @example "custom-input-inline my-theme"
     */
    className?: string;
    /**
     * Callback function triggered when the input value changes
     * Receives the new string value as parameter
     *
     * @param value - The new value entered by the user
     * @example (value) => setUserName(value)
     */
    onChange?: (value: string) => void;
    /**
     * Callback function triggered when the input is clicked
     * Used for handling click events on the input field
     *
     * @example () => console.log('Input clicked')
     */
    onClick?: () => void;
    /**
     * Whether the component is in a loading state
     * When true, the input may show loading indicators or be disabled
     *
     * @default false
     */
    loading?: boolean;
    /**
     * Marks the input as required. When true, and on form submit attempt, if empty it will show invalid state.
     */
    isRequiere?: boolean;
}
