import { type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
import { type ButtonClassNameOptions, type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
import { type PropsWithRef } from "../types.js";
/** @since 6.0.0 */
export type FileInputClassNameOptions = ButtonClassNameOptions;
/** @since 6.0.0 */
export declare function fileInput(options?: FileInputClassNameOptions): string;
/** @since 6.0.0 */
export type FileInputHTMLAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
/**
 * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no
 * longer required.
 */
export interface FileInputProps extends ButtonClassNameThemeOptions, FileInputHTMLAttributes {
    /**
     * This is the label text for icon-only file inputs.
     *
     * @defaultValue `"Upload"`
     */
    srOnlyLabel?: ReactNode;
    /**
     * Any additional props to provide to the container `<label>` element since
     * most props get passed to the `<input type="file">`. So this would be useful
     * for inline style or click handlers.
     */
    labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
    /**
     * An optional icon to display for the file input.
     *
     * @defaultValue `getIcon("upload")`
     */
    icon?: ReactNode;
    /**
     * Boolean if the icon should appear after the children in the label.
     *
     * @defaultValue `false`
     */
    iconAfter?: boolean;
    /**
     * Boolean if the file input should no longer allow the same file to be
     * selected multiple times and trigger the `onChange` each time it is
     * selected.
     *
     * @defaultValue `false`
     */
    disableRepeatableFiles?: boolean;
    /**
     * Children should generally be provided when the {@link buttonType} is
     * set to `"text"`. This defaults to a screen-reader only accessible text.
     *
     * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`
     */
    children?: ReactNode;
}
/**
 * **Client Component**
 * This might be able to become a server component if I remove the getIcon hook
 *
 * @example Simple Example
 * ```tsx
 * import { FileInput, Form } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * const extensions = [
 *   "svg",
 *   "jpeg",
 *   "jpg",
 *   "png",
 *   "apng",
 *   "mkv",
 *   "mp4",
 *   "mpeg",
 *   "mpg",
 *   "webm",
 *   "mov",
 * ] as const;
 *
 * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;
 * const maxFiles = 10;
 *
 * function Example(): ReactElement {
 *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =
 *     useFileUpload({
 *       maxFiles,
 *       maxFileSize: FOUR_HUNDRED_MB,
 *       extensions,
 *     });
 *
 *   return (
 *     <Form>
 *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />
 *       <Button onClick={reset} disabled={!stats.length}>
 *         Remove all files
 *       </Button>
 *     </Form>
 *   );
 * }
 * ```
 *
 * @since 6.0.0 Added additional support for `iconSize` and
 * `responsive`. Also removed the `disableIconSpacing` prop since it is no
 * longer required.
 */
export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;
