@yamada-ui/password-input
Version:
Yamada UI password input component
1 lines • 4.89 kB
Source Map (JSON)
{"version":3,"sources":["../src/password-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { ui } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport {\n PasswordInputProvider,\n usePasswordInputContext,\n} from \"./password-input-context\"\nimport { EyeIcon, EyeOffIcon, PasswordInputIcon } from \"./password-input-icon\"\nimport { usePasswordInput } from \"./use-password-input\"\n\ninterface PasswordInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The icons to be used for the visibility toggle.\n */\n visibilityIcon?: { off: ReactElement; on: ReactElement }\n /**\n * The props for the container element.\n */\n containerProps?: HTMLUIProps\n /**\n * The props for the icon element.\n */\n iconProps?: HTMLUIProps\n /**\n * The props for the input element.\n */\n inputProps?: HTMLUIProps<\"input\">\n}\n\nexport interface PasswordInputProps\n extends HTMLUIProps<\"input\">,\n ThemeProps<\"PasswordInput\">,\n UsePasswordInputProps,\n PasswordInputOptions {}\n\n/**\n * `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n *\n * @see Docs https://yamada-ui.com/components/forms/password-input\n */\nexport const PasswordInput = forwardRef<PasswordInputProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"PasswordInput\", props)\n const {\n className,\n h,\n height = h,\n minH,\n minHeight = minH,\n visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n containerProps,\n iconProps,\n inputProps,\n ...rest\n } = omitThemeProps(mergedProps)\n const { visible, getContainerProps, getIconProps, getInputProps } =\n usePasswordInput(rest)\n\n const css: CSSUIObject = { ...styles.container }\n\n return (\n <PasswordInputProvider value={{ styles }}>\n <ui.div\n className={cx(\"ui-password-input\", className)}\n __css={css}\n {...getContainerProps(containerProps)}\n >\n <PasswordInputField\n height={height}\n minHeight={minHeight}\n {...getInputProps(inputProps, ref)}\n />\n\n <PasswordInputIcon {...getIconProps(iconProps)}>\n {visible ? visibilityIcon.off : visibilityIcon.on}\n </PasswordInputIcon>\n </ui.div>\n </PasswordInputProvider>\n )\n },\n)\n\nPasswordInput.displayName = \"PasswordInput\"\nPasswordInput.__ui__ = \"PasswordInput\"\n\ninterface PasswordInputFieldProps extends HTMLUIProps<\"input\"> {}\n\nconst PasswordInputField = forwardRef<PasswordInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePasswordInputContext()\n\n const css: CSSUIObject = { ...styles.field }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-password-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nPasswordInputField.displayName = \"PasswordInputField\"\nPasswordInputField.__ui__ = \"PasswordInputField\"\n"],"mappings":";;;;;;;;;;;;;;;AASA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAuDW,cAatB,YAbsB;AATvB,IAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,iBAAiB,KAAK;AAC3E,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ,iBAAiB,EAAE,KAAK,oBAAC,cAAW,GAAI,IAAI,oBAAC,WAAQ,EAAG;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM,EAAE,SAAS,mBAAmB,cAAc,cAAc,IAC9D,iBAAiB,IAAI;AAEvB,UAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,WACE,oBAAC,yBAAsB,OAAO,EAAE,OAAO,GACrC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG,kBAAkB,cAAc;AAAA,QAEpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACC,GAAG,cAAc,YAAY,GAAG;AAAA;AAAA,UACnC;AAAA,UAEA,oBAAC,qBAAmB,GAAG,aAAa,SAAS,GAC1C,oBAAU,eAAe,MAAM,eAAe,IACjD;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,qBAAqB;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,wBAAwB;AAE3C,UAAM,MAAmB,EAAE,GAAG,OAAO,MAAM;AAE3C,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,4BAA4B,SAAS;AAAA,QACnD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":[]}