{"version":3,"file":"EmailInput.Bi3ooTw0.mjs","names":["useState","useCallback"],"sources":["https:/framerusercontent.com/modules/tvOfAOhBpkjGtKxOrs8g/CivM37aZpTwBa4IMQ5mg/EmailInput.js"],"sourcesContent":["// Fully customizable form field that validates email format automatically\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Email Form Field with automatic validation\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 100\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function EmailInput(props){const{label,placeholder,errorMessage,backgroundColor,textColor,placeholderColor,borderColor,errorColor,focusColor,labelFont,inputFont,errorFont,borderRadius,borderWidth,padding,showLabel,name}=props;const[email,setEmail]=useState(\"\");const[isFocused,setIsFocused]=useState(false);const[hasBlurred,setHasBlurred]=useState(false);const validateEmail=useCallback(value=>{if(!value)return true;const emailRegex=/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;return emailRegex.test(value);},[]);const isValid=validateEmail(email);const showError=hasBlurred&&!isValid&&email.length>0;const handleChange=useCallback(e=>{startTransition(()=>setEmail(e.target.value));},[]);const handleFocus=useCallback(()=>{startTransition(()=>setIsFocused(true));},[]);const handleBlur=useCallback(()=>{startTransition(()=>{setIsFocused(false);setHasBlurred(true);});},[]);const currentBorderColor=showError?errorColor:isFocused?focusColor:borderColor;return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",display:\"flex\",flexDirection:\"column\",gap:8,position:\"relative\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                    input::placeholder {\n                        color: ${placeholderColor};\n                        opacity: 1;\n                    }\n                `}),showLabel&&/*#__PURE__*/_jsx(\"label\",{style:{color:textColor,...labelFont},children:label}),/*#__PURE__*/_jsx(\"input\",{type:\"email\",name:name,value:email,onChange:handleChange,onFocus:handleFocus,onBlur:handleBlur,placeholder:placeholder,required:true,style:{width:\"100%\",backgroundColor,color:textColor,border:`${borderWidth}px solid ${currentBorderColor}`,borderRadius,padding,outline:\"none\",transition:\"border-color 0.2s ease\",boxSizing:\"border-box\",...inputFont},\"aria-invalid\":showError,\"aria-describedby\":showError?\"email-error\":undefined}),showError&&/*#__PURE__*/_jsx(\"span\",{id:\"email-error\",role:\"alert\",style:{color:errorColor,...errorFont},children:errorMessage})]});}addPropertyControls(EmailInput,{name:{type:ControlType.String,title:\"Name\",defaultValue:\"email\"},label:{type:ControlType.String,title:\"Label\",defaultValue:\"Email Address\"},showLabel:{type:ControlType.Boolean,title:\"Show Label\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},placeholder:{type:ControlType.String,title:\"Placeholder\",defaultValue:\"Enter your email\"},errorMessage:{type:ControlType.String,title:\"Error Message\",defaultValue:\"Please enter a valid email address with @ and domain\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},placeholderColor:{type:ControlType.Color,title:\"Placeholder Color\",defaultValue:\"#CCCCCC\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\"},focusColor:{type:ControlType.Color,title:\"Focus Color\",defaultValue:\"#000000\"},errorColor:{type:ControlType.Color,title:\"Error Color\",defaultValue:\"#FF0000\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},inputFont:{type:ControlType.Font,title:\"Input Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}},errorFont:{type:ControlType.Font,title:\"Error Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"12px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:1,min:0,max:10,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:12,min:0,max:32,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"EmailInput\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"100\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./EmailInput.map"],"mappings":"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"}