@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 a 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>;
    /** Icon to display inside the input */
    icon?: React.ReactNode;
    /** Position of the icon inside the input */
    iconPosition?: 'left' | 'right';
    /** Removes increment/decrement arrows from number inputs */
    removeArrows?: boolean;
};
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';
});
/**
 * 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
 * - Icons with left or right positioning
 *
 * @example
 * ```
 * <Input
 *   type="text"
 *   labelProps={{ value: "Username" }}
 *   placeholder="Enter username"
 *   error={{ message: "This field is required" }}
 *   icon={<SearchIcon />}
 *   iconPosition="left"
 *   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 a 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>;
    /** Icon to display inside the input */
    icon?: React.ReactNode;
    /** Position of the icon inside the input */
    iconPosition?: "left" | "right";
    /** Removes increment/decrement arrows from number inputs */
    removeArrows?: boolean;
} & {
    /** 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 a 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>;
    /** Icon to display inside the input */
    icon?: React.ReactNode;
    /** Position of the icon inside the input */
    iconPosition?: "left" | "right";
    /** Removes increment/decrement arrows from number inputs */
    removeArrows?: boolean;
} & {
    /** HTML input type (text, number, email, etc.) */
    type: "number";
}, "ref">) & import('react').RefAttributes<HTMLInputElement>>;
export { Input };
export type { InputProps };