{"version":3,"file":"index.cjs","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import { ChangeEvent, InputHTMLAttributes, forwardRef, useId, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  IconButton,\n  InputElement,\n  InputEndContent,\n  InputWrapper,\n  WrapperProps,\n} from '@/components/InputWrapper';\nexport interface PasswordFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'children' | 'type' | 'string' | 'onChange' | 'dir'\n    > {\n  type?: 'password';\n  value?: string;\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n}\n\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      ...props\n    },\n    ref\n  ) => {\n    const defaultId = useId();\n    const [viewPassword, setViewPassword] = useState<boolean>(false);\n    const togglePasswordViewer = () => {\n      setViewPassword((viewPassword: boolean) => !viewPassword);\n    };\n\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const hasEndContent = value.length > 0;\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        <InputElement\n          $hasStartContent={false}\n          $hasEndContent={hasEndContent}\n          ref={ref}\n          type={viewPassword ? 'text' : 'password'}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            <IconButton\n              disabled={disabled}\n              onClick={togglePasswordViewer}\n            >\n              <Icon\n                name={viewPassword ? 'eye-closed' : 'eye'}\n                size=\"md\"\n              />\n            </IconButton>\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["forwardRef","useId","useState","viewPassword","jsxs","InputWrapper","jsx","InputElement","InputEndContent","IconButton","Icon"],"mappings":";;;;;;;;;AAuBO,MAAM,aAAA,GAAgBA,gBAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,KAAA,GAAQ,EAAA;AAAA,IACR,QAAA,EAAU,YAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,YAAYC,WAAA,EAAM;AACxB,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAkB,KAAK,CAAA;AAC/D,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,eAAA,CAAgB,CAACC,aAAAA,KAA0B,CAACA,aAAY,CAAA;AAAA,IAC1D,CAAA;AAEA,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAqC;AACrD,MAAA,YAAA,CAAa,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IAChC,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,MAAM,MAAA,GAAS,CAAA;AAErC,IAAA,uBACEC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,SAAA;AAAA,QACV,KAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,yBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAkB,KAAA;AAAA,cAClB,cAAA,EAAgB,aAAA;AAAA,cAChB,GAAA;AAAA,cACA,IAAA,EAAM,eAAe,MAAA,GAAS,UAAA;AAAA,cAC9B,IAAI,EAAA,IAAM,SAAA;AAAA,cACV,QAAA;AAAA,cACA,KAAA;AAAA,cACA,QAAA;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,UACC,aAAA,mCACEC,4BAAA,EAAA,EACC,QAAA,kBAAAF,cAAA;AAAA,YAACG,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,OAAA,EAAS,oBAAA;AAAA,cAET,QAAA,kBAAAH,cAAA;AAAA,gBAACI,SAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,eAAe,YAAA,GAAe,KAAA;AAAA,kBACpC,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,WACF,EACF;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;"}