{"version":3,"file":"PasswordForm.BBuHBiBi.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/6IlZFsJB4DSFSiQrnfm4/h2tu1mP0ycYIbpgzyih4/PasswordForm.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function PasswordForm(props){const{mode,passwordLabel,passwordPlaceholder,confirmLabel,confirmPlaceholder,enterLabel,enterPlaceholder,accentColor,borderColor,labelColor,inputBackground,inputTextColor,iconColor,radius,style}=props;const[values,setValues]=useState({password:\"\",confirm:\"\",enter:\"\"});const[visible,setVisible]=useState({password:false,confirm:false,enter:false});const[focused,setFocused]=useState(null);const setField=(key,val)=>setValues(prev=>({...prev,[key]:val}));const toggleVisible=key=>setVisible(prev=>({...prev,[key]:!prev[key]}));const container={display:\"flex\",flexDirection:\"column\",gap:24,width:\"100%\",fontFamily:\"Geist, ui-sans-serif, system-ui, -apple-system, sans-serif\",...style};const labelStyle={fontSize:14,lineHeight:\"1.3em\",fontWeight:500,color:labelColor,marginBottom:10,display:\"block\"};const fieldWrap={display:\"flex\",flexDirection:\"column\",width:\"100%\"};const inputRow=key=>({display:\"flex\",alignItems:\"center\",width:\"100%\",boxSizing:\"border-box\",height:48,padding:\"0 14px 0 16px\",background:inputBackground,border:`1px solid ${focused===key?accentColor:borderColor}`,borderRadius:radius,transition:\"border-color 0.15s ease, box-shadow 0.15s ease\",boxShadow:focused===key?`0 0 0 3px ${hexToRgba(accentColor,.12)}`:\"none\"});const inputStyle={flex:1,minWidth:0,height:\"100%\",border:\"none\",outline:\"none\",background:\"transparent\",fontSize:14,fontFamily:\"inherit\",color:inputTextColor,padding:0};const eyeButton={display:\"flex\",alignItems:\"center\",justifyContent:\"center\",width:32,height:32,marginLeft:8,padding:0,border:\"none\",background:\"transparent\",cursor:\"pointer\",borderRadius:8,flexShrink:0};const renderField=(key,label,placeholder)=>/*#__PURE__*/_jsxs(\"div\",{style:fieldWrap,children:[/*#__PURE__*/_jsx(\"label\",{style:labelStyle,children:label}),/*#__PURE__*/_jsxs(\"div\",{style:inputRow(key),children:[/*#__PURE__*/_jsx(\"input\",{type:visible[key]?\"text\":\"password\",value:values[key],placeholder:placeholder,onChange:e=>setField(key,e.target.value),onFocus:()=>setFocused(key),onBlur:()=>setFocused(null),style:inputStyle}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",onMouseDown:e=>e.preventDefault(),onClick:()=>toggleVisible(key),style:eyeButton,\"aria-label\":visible[key]?\"Hide password\":\"Show password\",children:/*#__PURE__*/_jsx(EyeIcon,{open:visible[key],color:iconColor})})]})]});return /*#__PURE__*/_jsx(\"div\",{style:container,children:mode===\"create\"?/*#__PURE__*/_jsxs(_Fragment,{children:[renderField(\"password\",passwordLabel,passwordPlaceholder),renderField(\"confirm\",confirmLabel,confirmPlaceholder)]}):renderField(\"enter\",enterLabel,enterPlaceholder)});}// Animated eye icon: the eyeball fades/scales and a diagonal slash\n// wipes across when the password is hidden.\nfunction EyeIcon(props){const{open,color}=props;return /*#__PURE__*/_jsxs(\"svg\",{width:\"20\",height:\"20\",viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:[/*#__PURE__*/_jsx(\"path\",{d:\"M2 12C2 12 5.5 5.5 12 5.5C18.5 5.5 22 12 22 12C22 12 18.5 18.5 12 18.5C5.5 18.5 2 12 2 12Z\",stroke:color,strokeWidth:\"1.7\",strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"circle\",{cx:\"12\",cy:\"12\",r:\"3\",fill:\"none\",stroke:color,strokeWidth:\"1.7\",style:{transform:open?\"scale(1)\":\"scale(0.55)\",transformOrigin:\"12px 12px\",opacity:open?1:.5,transition:\"transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease\"}}),/*#__PURE__*/_jsx(\"line\",{x1:\"4\",y1:\"4\",x2:\"20\",y2:\"20\",stroke:color,strokeWidth:\"1.7\",strokeLinecap:\"round\",pathLength:1,style:{strokeDasharray:1,strokeDashoffset:open?1:0,transition:\"stroke-dashoffset 0.3s ease\"}})]});}function hexToRgba(color,alpha){if(color.startsWith(\"rgb\")){return color.replace(\"rgb(\",\"rgba(\").replace(\")\",`, ${alpha})`);}const hex=color.replace(\"#\",\"\");const full=hex.length===3?hex.split(\"\").map(c=>c+c).join(\"\"):hex;const r=parseInt(full.substring(0,2),16);const g=parseInt(full.substring(2,4),16);const b=parseInt(full.substring(4,6),16);if([r,g,b].some(n=>Number.isNaN(n)))return color;return`rgba(${r}, ${g}, ${b}, ${alpha})`;}PasswordForm.displayName=\"Password Form\";addPropertyControls(PasswordForm,{mode:{title:\"Mode\",type:ControlType.Enum,options:[\"create\",\"enter\"],optionTitles:[\"Create Password\",\"Enter Password\"],defaultValue:\"create\",displaySegmentedControl:true},passwordLabel:{title:\"Password Label\",type:ControlType.String,defaultValue:\"Create Password\",hidden:p=>p.mode===\"enter\"},passwordPlaceholder:{title:\"Password Hint\",type:ControlType.String,defaultValue:\"Enter a password\",hidden:p=>p.mode===\"enter\"},confirmLabel:{title:\"Confirm Label\",type:ControlType.String,defaultValue:\"Confirm Password\",hidden:p=>p.mode===\"enter\"},confirmPlaceholder:{title:\"Confirm Hint\",type:ControlType.String,defaultValue:\"Re-enter your password\",hidden:p=>p.mode===\"enter\"},enterLabel:{title:\"Password Label\",type:ControlType.String,defaultValue:\"Password\",hidden:p=>p.mode===\"create\"},enterPlaceholder:{title:\"Password Hint\",type:ControlType.String,defaultValue:\"Enter your password\",hidden:p=>p.mode===\"create\"},accentColor:{title:\"Accent\",type:ControlType.Color,defaultValue:\"#5283FF\"},borderColor:{title:\"Border\",type:ControlType.Color,defaultValue:\"rgba(142, 142, 145, 0.25)\"},labelColor:{title:\"Label Color\",type:ControlType.Color,defaultValue:\"#6C6C70\"},inputBackground:{title:\"Input BG\",type:ControlType.Color,defaultValue:\"rgba(0, 0, 0, 0)\"},inputTextColor:{title:\"Input Text\",type:ControlType.Color,defaultValue:\"#0A0A0E\"},iconColor:{title:\"Icon Color\",type:ControlType.Color,defaultValue:\"#8E8E92\"},radius:{title:\"Radius\",type:ControlType.Number,defaultValue:10,min:0,max:40,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PasswordForm\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PasswordForm.map"],"mappings":"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"}