166419134f
- Updated import paths for various components to align with new directory structure. - Changed imports from 'row-actions', 'confirm-dialog', 'image-preview-button', and 'file-upload' to their respective new locations in 'data-display', 'dialogs', and 'inputs'. - Adjusted imports in multiple pages including purchase, restock, transaction, category, customer, product, raw-material, supplier, roles, and settings. - Ensured all relevant components are imported from their new locations to maintain functionality.
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Eye, EyeOff } from 'lucide-react';
|
|
import type { ComponentProps, Ref } from 'react';
|
|
import { useState } from 'react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export default function PasswordInput({
|
|
className,
|
|
ref,
|
|
...props
|
|
}: Omit<ComponentProps<'input'>, 'type'> & { ref?: Ref<HTMLInputElement> }) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Input
|
|
type={showPassword ? 'text' : 'password'}
|
|
className={cn('pr-10', className)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword((prev) => !prev)}
|
|
className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none"
|
|
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
|
tabIndex={-1}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="size-4" />
|
|
) : (
|
|
<Eye className="size-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|