@papernote/ui/dist/components/Input.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
/**
 * Validation state for input components
 */
export type ValidationState = 'error' | 'success' | 'warning' | null;
/**
 * Input component props
 */
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /** Input label text */
    label?: string;
    /** Helper text displayed below input */
    helperText?: string;
    /** Visual validation state */
    validationState?: ValidationState;
    /** Validation message (overrides helperText when present) */
    validationMessage?: string;
    /** Icon to display in input (legacy - use prefixIcon/suffixIcon) */
    icon?: React.ReactNode;
    /** Position of icon (legacy - use prefixIcon/suffixIcon) */
    iconPosition?: 'left' | 'right';
    /** Show character counter (requires maxLength prop) */
    showCount?: boolean;
    /** Text prefix (displayed inside input, before value) */
    prefix?: string;
    /** Text suffix (displayed inside input, after value) */
    suffix?: string;
    /** Icon prefix (displayed inside input, before value) */
    prefixIcon?: React.ReactNode;
    /** Icon suffix (displayed inside input, after value) */
    suffixIcon?: React.ReactNode;
    /** Show password visibility toggle (only for type="password") */
    showPasswordToggle?: boolean;
    /** Show clearable button to clear input value */
    clearable?: boolean;
    /** Callback when clear button is clicked */
    onClear?: () => void;
    /** Show loading spinner in input */
    loading?: boolean;
    /**
     * Input mode hint for mobile keyboards.
     * 'none' - No virtual keyboard
     * 'text' - Standard text keyboard (default)
     * 'decimal' - Decimal number keyboard
     * 'numeric' - Numeric keyboard
     * 'tel' - Telephone keypad
     * 'search' - Search optimized keyboard
     * 'email' - Email optimized keyboard
     * 'url' - URL optimized keyboard
     */
    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /**
     * Enter key hint for mobile keyboards.
     * 'enter' - Standard enter key
     * 'done' - Done action
     * 'go' - Go/navigate action
     * 'next' - Move to next field
     * 'previous' - Move to previous field
     * 'search' - Search action
     * 'send' - Send action
     */
    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /** Size variant - 'md' is default, 'lg' provides larger touch target (44px min) */
    size?: 'sm' | 'md' | 'lg';
}
/**
 * Input - Text input component with validation, icons, and prefixes/suffixes
 *
 * A feature-rich text input with support for validation states, character counting,
 * password visibility toggle, prefix/suffix text and icons, and clearable functionality.
 *
 * Mobile optimizations:
 * - inputMode prop for appropriate mobile keyboard
 * - enterKeyHint prop for mobile keyboard action button
 * - Size variants with touch-friendly targets (44px for 'lg')
 *
 * @example Basic input with label
 * ```tsx
 * <Input
 *   label="Email"
 *   type="email"
 *   placeholder="Enter your email"
 *   inputMode="email"
 *   enterKeyHint="next"
 * />
 * ```
 *
 * @example With validation
 * ```tsx
 * <Input
 *   label="Username"
 *   value={username}
 *   onChange={(e) => setUsername(e.target.value)}
 *   validationState={error ? 'error' : 'success'}
 *   validationMessage={error || 'Username is available'}
 * />
 * ```
 *
 * @example Password with toggle and character count
 * ```tsx
 * <Input
 *   type="password"
 *   label="Password"
 *   showPasswordToggle
 *   showCount
 *   maxLength={50}
 * />
 * ```
 *
 * @example Mobile-optimized phone input
 * ```tsx
 * <Input
 *   label="Phone Number"
 *   type="tel"
 *   inputMode="tel"
 *   enterKeyHint="done"
 *   size="lg"
 * />
 * ```
 *
 * @example With prefix/suffix
 * ```tsx
 * <Input
 *   label="Amount"
 *   type="number"
 *   inputMode="decimal"
 *   prefixIcon={<DollarSign />}
 *   suffix="USD"
 *   clearable
 * />
 * ```
 */
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
export default Input;
//# sourceMappingURL=Input.d.ts.map