"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { button } from "../button/buttonStyles.js";
import { getIcon } from "../icon/iconConfig.js";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { SrOnly } from "../typography/SrOnly.js";
import { useEnsuredId } from "../useEnsuredId.js";
/** @remarks \@since 6.0.0 */ export function fileInput(options = {}) {
    return cnb("rmd-file-input", button(options));
}
/**
 * **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>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0 Added additional support for `iconSize` and
 * `responsive`. Also removed the `disableIconSpacing` prop since it is no
 * longer required.
 */ export const FileInput = /*#__PURE__*/ forwardRef(function FileInput(props, ref) {
    const { id: propId, className, children: propChildren, icon: propIcon, iconAfter = false, srOnlyLabel = "Upload", disableRepeatableFiles = false, labelProps, theme = "primary", themeType = "contained", buttonType = propChildren ? "text" : "icon", disabled = false, iconSize, responsive, multiple = false, ...remaining } = props;
    const id = useEnsuredId(propId, "file-input");
    const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
        ...labelProps,
        onClick (event) {
            labelProps?.onClick?.(event);
            // stop propagation so 2 ripples are not created
            event.stopPropagation();
        },
        disabled
    });
    const icon = getIcon("upload", propIcon);
    let children = propChildren;
    if (typeof propChildren === "undefined" && !props["aria-label"] && !props["aria-labelledby"]) {
        children = /*#__PURE__*/ _jsx(SrOnly, {
            phoneOnly: responsive,
            children: srOnlyLabel
        });
    }
    return /*#__PURE__*/ _jsxs("label", {
        ...labelProps,
        ...handlers,
        className: fileInput({
            theme,
            themeType,
            buttonType,
            disabled,
            iconSize,
            pressed,
            responsive,
            pressedClassName,
            className: className || labelProps?.className
        }),
        children: [
            !iconAfter && icon,
            children,
            iconAfter && icon,
            /*#__PURE__*/ _jsx("input", {
                ...remaining,
                id: id,
                ref: ref,
                value: disableRepeatableFiles || !props.onChange ? remaining.value : "",
                type: "file",
                className: "rmd-hidden-input",
                disabled: disabled,
                multiple: multiple
            }),
            ripples
        ]
    });
});

//# sourceMappingURL=FileInput.js.map