Input

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { type VariantProps, cva } from "class-variance-authority";
5import { EyeIcon, EyeOffIcon } from "lucide-react";
6import * as React from "react";
7 
8export const containerVariants = cva(
9  cn(
10    "flex w-full px-2.5 relative rounded-lg",
11    "text-base cursor-text",
12    "data-[is-invalid=true]:border-destructive",
13    "data-[disabled=true]:opacity-70 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:border-input",
14    "hover:border-ring focus-within:border-ring",
15    "transition-all duration-200",
16  ),
17  {
18    variants: {
19      variant: {
20        default: "bg-muted border-2 border-input",
21        faded: cn(
22          "bg-muted border-2 border-muted",
23          "hover:bg-accent hover:border-accent",
24          "focus-within:bg-accent focus-within:border-accent",
25          "data-[disabled=true]:hover:bg-muted data-[disabled=true]:hover:border-muted",
26        ),
27        bordered: "border-2 border-input",
28        underline: "border-b-2 border-input rounded-none",
29      },
30      size: {
31        sm: "h-10 py-1.5",
32        md: "h-12 py-2",
33        lg: "h-13 py-2",
34      },
35    },
36    compoundVariants: [
37      {
38        variant: "underline",
39        size: "sm",
40        className: "px-1 h-9",
41      },
42      {
43        variant: "underline",
44        size: "md",
45        className: "px-1 h-11",
46      },
47      {
48        variant: "underline",
49        size: "lg",
50        className: "px-1 h-12",
51      },
52    ],
53    defaultVariants: {
54      variant: "default",
55      size: "md",
56    },
57  },
58);
59 
60const inputVariants = cva(
61  cn(
62    "w-full outline-hidden",
63    "disabled:cursor-not-allowed",
64    "bg-transparent",
65    "placeholder:text-muted-foreground",
66    "[&:-webkit-autofill]:bg-transparent",
67    "[&:-webkit-autofill:hover]:bg-transparent",
68    "[&:-webkit-autofill:focus]:bg-transparent",
69    "[&:-webkit-autofill:active]:bg-transparent",
70    "[&:-webkit-autofill]:[transition-delay:9999s]",
71  ),
72  {
73    variants: {
74      size: {
75        sm: "text-base",
76        md: "text-base",
77        lg: "text-lg",
78      },
79    },
80    defaultVariants: {
81      size: "md",
82    },
83  },
84);
85 
86interface InputProps
87  extends Omit<React.ComponentProps<"input">, "size">,
88    VariantProps<typeof containerVariants> {
89  inputClassName?: string;
90  startContent?: React.ReactNode;
91  endContent?: React.ReactNode;
92}
93 
94const Input = React.forwardRef<HTMLInputElement, InputProps>(
95  (
96    {
97      className,
98      inputClassName,
99      type,
100// … truncated