@devopness/ui-react/dist/src/components/Forms/Input/Input.d.ts

Devopness Design System React Components - Painless essential DevOps to everyone

import { ErrorMessageProps } from '../../Primitives/ErrorMessage';
import { LabelProps } from '../../Primitives/Label';
type SharedProps = React.InputHTMLAttributes<HTMLInputElement> & {
    /** React ref for direct DOM manipulation */
    ref?: React.Ref<HTMLInputElement>;
    /** Error message configuration */
    error?: ErrorMessageProps['error'];
    /** Props passed directly to Label component */
    labelProps?: LabelProps;
    /** Custom styling options for input text */
    publicStyle?: {
        /** Font style applied to input value */
        fontStyleValue?: string;
        /** Font style applied to placeholder */
        fontStylePlaceholder?: string;
    };
    /** Whether to automatically focus the input when an error occurs */
    autoFocusOnError?: boolean;
    /**
     * Props passed directly to input HTML element
     *
     * @override props, e.g: inputProps.type overrides props.type
     *
     * <Input type="text" inputProps={{type: 'number'}} /> // input type is number
     */
    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
};
type InputProps = (SharedProps & {
    /** HTML input type (text, number, email, etc) */
    type: Exclude<React.HTMLInputTypeAttribute, 'number'>;
}) | (SharedProps & {
    /** HTML input type (text, number, email, etc) */
    type: 'number';
    /** Removes increment/decrement arrows from number inputs */
    removeArrows?: boolean;
});
/**
 * Allows users to enter and edit text
 *
 * A flexible input component that supports:
 * - Various input types (text, number, etc.)
 * - Error states with optional automatic focus
 * - Custom styling
 * - Label and help text
 *
 * @example
 * ```
 * <Input
 *   type="text"
 *   label={{ value: "Username" }}
 *   placeholder="Enter username"
 *   error={{ message: "This field is required" }}
 *   publicStyle={{
 *     fontStyleValue: "bold",
 *     fontStylePlaceholder: "italic"
 *   }}
 * />
 * ```
 */
declare const Input: import('react').ForwardRefExoticComponent<(Omit<import('react').InputHTMLAttributes<HTMLInputElement> & {
    /** React ref for direct DOM manipulation */
    ref?: React.Ref<HTMLInputElement>;
    /** Error message configuration */
    error?: ErrorMessageProps["error"];
    /** Props passed directly to Label component */
    labelProps?: LabelProps;
    /** Custom styling options for input text */
    publicStyle?: {
        /** Font style applied to input value */
        fontStyleValue?: string;
        /** Font style applied to placeholder */
        fontStylePlaceholder?: string;
    };
    /** Whether to automatically focus the input when an error occurs */
    autoFocusOnError?: boolean;
    /**
     * Props passed directly to input HTML element
     *
     * @override props, e.g: inputProps.type overrides props.type
     *
     * <Input type="text" inputProps={{type: 'number'}} /> // input type is number
     */
    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
} & {
    /** HTML input type (text, number, email, etc) */
    type: Exclude<React.HTMLInputTypeAttribute, "number">;
}, "ref"> | Omit<import('react').InputHTMLAttributes<HTMLInputElement> & {
    /** React ref for direct DOM manipulation */
    ref?: React.Ref<HTMLInputElement>;
    /** Error message configuration */
    error?: ErrorMessageProps["error"];
    /** Props passed directly to Label component */
    labelProps?: LabelProps;
    /** Custom styling options for input text */
    publicStyle?: {
        /** Font style applied to input value */
        fontStyleValue?: string;
        /** Font style applied to placeholder */
        fontStylePlaceholder?: string;
    };
    /** Whether to automatically focus the input when an error occurs */
    autoFocusOnError?: boolean;
    /**
     * Props passed directly to input HTML element
     *
     * @override props, e.g: inputProps.type overrides props.type
     *
     * <Input type="text" inputProps={{type: 'number'}} /> // input type is number
     */
    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
} & {
    /** HTML input type (text, number, email, etc) */
    type: "number";
    /** Removes increment/decrement arrows from number inputs */
    removeArrows?: boolean;
}, "ref">) & import('react').RefAttributes<HTMLInputElement>>;
export type { InputProps };
export { Input };