import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useEnsuredId } from "../useEnsuredId.js";
import { FormMessageContainer } from "./FormMessageContainer.js";
import { Label } from "./Label.js";
import { TextFieldContainer } from "./TextFieldContainer.js";
import { textField } from "./textFieldStyles.js";
/**
 * **Server Component**
 *
 * The structure for this component is:
 * @example
 * Component Structure
 * ```tsx
 * <FormMessageContainer {...messageContainerProps}>
 *   <TextFieldContainer {...containerProps}>
 *     <input {...props} />
 *     <Label {...labelProps} />
 *   </TextFieldContainer>
 * </FormMessageContainer>
 * ```
 *
 * @example
 * Simple Example
 * ```tsx
 * import { TextField } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <TextField
 *       label="Name"
 *       placeholder="Bob"
 *       defaultValue=""
 *     />
 *   );
 * }
 * ```
 */ export const TextField = /*#__PURE__*/ forwardRef(function TextField(props, ref) {
    const { id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, stretch, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
    const { disabled, readOnly } = props;
    const id = useEnsuredId(propId, "text-field");
    let { placeholder = "" } = props;
    if (label && !placeholder) {
        // See the placeholder type definition comments for information
        placeholder = " ";
    }
    return /*#__PURE__*/ _jsx(FormMessageContainer, {
        ...messageContainerProps,
        messageProps: messageProps && {
            error,
            theme,
            ...messageProps
        },
        children: /*#__PURE__*/ _jsxs(TextFieldContainer, {
            ...containerProps,
            style: style,
            className: className,
            theme: theme,
            label: !!label,
            error: error,
            dense: dense,
            inline: inline,
            active: active,
            stretch: stretch,
            readOnly: readOnly,
            disabled: disabled,
            leftAddon: leftAddon,
            leftAddonProps: leftAddonProps,
            rightAddon: rightAddon,
            rightAddonProps: rightAddonProps,
            underlineDirection: underlineDirection,
            disableLeftAddonStyles: disableLeftAddonStyles,
            disableRightAddonStyles: disableRightAddonStyles,
            children: [
                children,
                /*#__PURE__*/ _jsx("input", {
                    ...remaining,
                    id: id,
                    ref: ref,
                    type: type,
                    name: name,
                    disabled: disabled,
                    placeholder: placeholder,
                    autoComplete: autoComplete,
                    style: inputStyle,
                    className: textField({
                        className: inputClassName,
                        placeholderHidden: !!label && !active
                    })
                }),
                label && /*#__PURE__*/ _jsx(Label, {
                    floating: true,
                    dense: dense,
                    error: error,
                    active: active,
                    disabled: disabled,
                    ...labelProps,
                    htmlFor: id,
                    style: labelProps?.style ?? labelStyle,
                    className: labelProps?.className ?? labelClassName,
                    children: label
                })
            ]
        })
    });
});

//# sourceMappingURL=TextField.js.map