tsf-password-field

1'use client';
2 
3import { Eye, EyeOff, InfoIcon } from 'lucide-react';
4import React from 'react';
5import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
6import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
7import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
8import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
9 
10export interface PasswordFieldProps {
11  label?: string;
12  description?: string;
13  fieldProps?: React.ComponentProps<typeof Field>;
14  props?: React.ComponentProps<'input'>;
15  tooltip?: React.ReactNode;
16}
17 
18export function PasswordField({ label, description, fieldProps, props, tooltip }: PasswordFieldProps) {
19  const field = useFieldContext<string>();
20  const { isValid, errors } = field.state.meta;
21  const [showPassword, setShowPassword] = React.useState(false);
22 
23  const handleTogglePassword = React.useCallback(() => {
24    setShowPassword((prev) => !prev);
25  }, []);
26 
27  return (
28    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
29      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
30      <InputGroup>
31        <InputGroupInput
32          id={field.name}
33          type={showPassword ? 'text' : 'password'}
34          placeholder='Enter password'
35          name={field.name}
36          value={field.state.value}
37          onChange={(e) => field.handleChange(e.target.value)}
38          onBlur={field.handleBlur}
39          aria-invalid={!isValid}
40          {...props}
41        />
42        <InputGroupAddon align='inline-end'>
43          <InputGroupButton aria-label='Toggle password' onClick={handleTogglePassword}>
44            {showPassword ? <EyeOff className='size-4' /> : <Eye className='size-4' />}
45          </InputGroupButton>
46          {tooltip && (
47            <Tooltip>
48              <TooltipTrigger asChild>
49                <InputGroupButton aria-label='Info' size='icon-xs'>
50                  <InfoIcon />
51                </InputGroupButton>
52              </TooltipTrigger>
53              <TooltipContent>{tooltip}</TooltipContent>
54            </Tooltip>
55          )}
56        </InputGroupAddon>
57      </InputGroup>
58      {!isValid && (
59        <FieldError
60          className='text-xs text-left'
61          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}
62        />
63      )}
64// … truncated