'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useField } from '@payloadcms/ui';
import { useState } from 'react';
export const MaskedField = ({ field, path })=>{
    const { setValue, value } = useField({
        path
    });
    const [revealed, setRevealed] = useState(false);
    const label = typeof field?.label === 'string' ? field.label : field?.name ?? path;
    return /*#__PURE__*/ _jsxs("div", {
        className: "field-type text",
        children: [
            /*#__PURE__*/ _jsx("label", {
                className: "field-label",
                children: label
            }),
            /*#__PURE__*/ _jsxs("div", {
                style: {
                    display: 'flex',
                    gap: '.5rem'
                },
                children: [
                    /*#__PURE__*/ _jsx("input", {
                        autoComplete: "off",
                        onChange: (e)=>setValue(e.target.value),
                        style: {
                            flex: 1
                        },
                        type: revealed ? 'text' : 'password',
                        value: value ?? ''
                    }),
                    /*#__PURE__*/ _jsx("button", {
                        onClick: ()=>setRevealed((r)=>!r),
                        type: "button",
                        children: revealed ? 'Hide' : 'Reveal'
                    })
                ]
            })
        ]
    });
};
export default MaskedField;

//# sourceMappingURL=MaskedField.js.map