mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-23 20:24:34 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

remove forward ref

Browse source
This commit is contained in:
miloschwartz 2025-04-12 12:40:52 -04:00
parent 521bbbf1d6
commit f14379a1c8
No known key found for this signature in database
25 changed files with 2067 additions and 1779 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/components/ui/input.tsx
View file

@ -5,39 +5,23 @@ import { EyeOff, Eye } from "lucide-react";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
const Input = (
{
ref,
className,
type,
...props
}: InputProps & {
ref: React.RefObject<HTMLInputElement>;
}
) => {
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
return type === "password" ? (
<div className="relative">
<input
type={showPassword ? "text" : "password"}
className={cn(
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
<div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
{showPassword ? (
<EyeOff
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
) : (
<Eye
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
)}
</div>
</div>
) : (
return type === "password" ? (
<div className="relative">
<input
type={type}
type={showPassword ? "text" : "password"}
className={cn(
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
@ -45,9 +29,32 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
ref={ref}
{...props}
/>
);
}
);
<div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
{showPassword ? (
<EyeOff
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
) : (
<Eye
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
)}
</div>
</div>
) : (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
);
};
Input.displayName = "Input";
export { Input };