its-just-ui/dist/components/Input/Input.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface InputContextValue {
    variant: InputVariant;
    size: InputSize;
    status: InputStatus;
    isDisabled: boolean;
    isLoading: boolean;
    isRequired: boolean;
    isFocused: boolean;
    hasError: boolean;
    hasIcon: boolean;
    iconPosition: 'left' | 'right';
    value?: string;
    onChange?: (value: string) => void;
}
export type InputVariant = 'default' | 'filled' | 'outlined' | 'ghost' | 'underlined';
export type InputSize = 'sm' | 'md' | 'lg';
export type InputStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
export interface InputBaseProps {
    variant?: InputVariant;
    size?: InputSize;
    status?: InputStatus;
    disabled?: boolean;
    loading?: boolean;
    required?: boolean;
    readOnly?: boolean;
    label?: string;
    helperText?: string;
    placeholder?: string;
    icon?: React.ReactNode;
    iconPosition?: 'left' | 'right';
    loadingText?: string;
    loadingSpinner?: React.ReactNode;
    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
    autoComplete?: string;
    autoFocus?: boolean;
    maxLength?: number;
    minLength?: number;
    pattern?: string;
    step?: string | number;
    min?: string | number;
    max?: string | number;
    className?: string;
    style?: React.CSSProperties;
    borderWidth?: string | number;
    borderColor?: string;
    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
    borderRadius?: string | number;
    fontSize?: string | number;
    fontWeight?: string | number;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    focusBackgroundColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string | number;
    focusRingOffset?: string | number;
    focusBorderColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string | number;
    paddingX?: string | number;
    paddingY?: string | number;
    margin?: string | number;
    marginX?: string | number;
    marginY?: string | number;
    width?: string | number;
    height?: string | number;
    minWidth?: string | number;
    maxWidth?: string | number;
    transitionDuration?: string;
    transitionProperty?: string;
    transitionTimingFunction?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-invalid'?: boolean;
    'aria-required'?: boolean;
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
}
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputBaseProps>, InputBaseProps {
    value?: string;
    defaultValue?: string;
    children?: React.ReactNode;
}
export interface InputIconProps {
    className?: string;
    style?: React.CSSProperties;
    color?: string;
    size?: string | number;
    children: React.ReactNode;
}
export interface InputLabelProps {
    className?: string;
    style?: React.CSSProperties;
    required?: boolean;
    children: React.ReactNode;
}
export interface InputHelperTextProps {
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
export declare const useInputContext: () => InputContextValue;
export declare const InputIcon: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputIconProps & React.RefAttributes<HTMLSpanElement>>>;
export declare const InputLabel: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputLabelProps & React.RefAttributes<HTMLLabelElement>>>;
export declare const InputHelperText: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputHelperTextProps & React.RefAttributes<HTMLDivElement>>>;
interface InputComponent extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>> {
    Icon: typeof InputIcon;
    Label: typeof InputLabel;
    HelperText: typeof InputHelperText;
}
declare const Input: InputComponent;
export { Input };
export default Input;