@yamada-ui/password-input
Version:
Yamada UI password input component
1 lines • 4.17 kB
Source Map (JSON)
{"version":3,"sources":["../src/password-input-icon.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { usePasswordInputContext } from \"./password-input-context\"\n\nexport interface PasswordInputIconProps extends HTMLUIProps {}\n\nexport const PasswordInputIcon = forwardRef<PasswordInputIconProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { styles } = usePasswordInputContext()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n maxHeight: \"1em\",\n maxWidth: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n const css: CSSUIObject = { ...styles.icon }\n\n return (\n <ui.button\n ref={ref}\n type=\"button\"\n className={cx(\"ui-password-input__icon\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.button>\n )\n },\n)\n\nPasswordInputIcon.displayName = \"PasswordInputIcon\"\nPasswordInputIcon.__ui__ = \"PasswordInputIcon\"\n\ninterface EyeIconProps extends IconProps {}\n\nexport const EyeIcon: FC<EyeIconProps> = ({ ...rest }) => {\n return (\n <Icon\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n viewBox=\"0 0 24 24\"\n {...rest}\n >\n <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </Icon>\n )\n}\n\nEyeIcon.displayName = \"EyeIcon\"\nEyeIcon.__ui__ = \"EyeIcon\"\n\ninterface EyeOffIconProps extends IconProps {}\n\nexport const EyeOffIcon: FC<EyeOffIconProps> = ({ ...rest }) => {\n return (\n <Icon\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n viewBox=\"0 0 24 24\"\n {...rest}\n >\n <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n <path d=\"m2 2 20 20\" />\n </Icon>\n )\n}\n\nEyeOffIcon.displayName = \"EyeOffIcon\"\nEyeOffIcon.__ui__ = \"EyeOffIcon\"\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,YAAY;AACrB,SAAS,IAAI,wBAAwB;AACrC,SAAS,oBAAoB;AA0BvB,cAoBF,YApBE;AArBC,IAAM,oBAAoB;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,EAAE,OAAO,IAAI,wBAAwB;AAE3C,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc;AAAA,MAAI,CAAC,UACvC,aAAa,OAAO;AAAA,QAClB,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,UAAU;AAAA,QACZ;AAAA,QACA,eAAe;AAAA,QACf,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAEA,UAAM,MAAmB,EAAE,GAAG,OAAO,KAAK;AAE1C,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW,GAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;AAIpB,IAAM,UAA4B,CAAC,EAAE,GAAG,KAAK,MAAM;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,GAAE,yGAAwG;AAAA,QAChH,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA;AAAA;AAAA,EAChC;AAEJ;AAEA,QAAQ,cAAc;AACtB,QAAQ,SAAS;AAIV,IAAM,aAAkC,CAAC,EAAE,GAAG,KAAK,MAAM;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,GAAE,kGAAiG;AAAA,QACzG,oBAAC,UAAK,GAAE,wCAAuC;AAAA,QAC/C,oBAAC,UAAK,GAAE,gGAA+F;AAAA,QACvG,oBAAC,UAAK,GAAE,cAAa;AAAA;AAAA;AAAA,EACvB;AAEJ;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}