Password Input

1import { useState } from "react";
2import { EyeIcon, EyeOffIcon } from "./icons";
3import { InputAddon, InputAddonButton, InputAddonButtonIcon } from "./input";
4import { TextInput, type TextInputProps } from "./text-input";
5 
6// Types
7export type PasswordInputProps = Omit<
8  TextInputProps,
9  "rightElement" | "secureTextEntry"
10>;
11 
12// Components
13export const PasswordInput = ({
14  onFocus,
15  onBlur,
16  disabled,
17  ...props
18}: PasswordInputProps) => {
19  const [isSecureEntry, setIsSecureEntry] = useState(true);
20 
21  const Icon = isSecureEntry ? EyeOffIcon : EyeIcon;
22 
23  return (
24    <TextInput
25      {...props}
26      disabled={disabled}
27      onBlur={onBlur}
28      onFocus={onFocus}
29      secureTextEntry={isSecureEntry}
30    >
31      <InputAddon align="inline-end">
32        <InputAddonButton
33          disabled={disabled}
34          onPress={() => setIsSecureEntry((p) => !p)}
35          size="icon"
36          variant="ghost"
37        >
38          <InputAddonButtonIcon>
39            <Icon />
40          </InputAddonButtonIcon>
41        </InputAddonButton>
42      </InputAddon>
43    </TextInput>
44  );
45};