Field 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-12 py-1.5",
32        md: "h-14 py-2",
33        lg: "h-16 py-2",
34      },
35    },
36    compoundVariants: [
37      {
38        variant: "underline",
39        size: "sm",
40        className: "px-1 h-11",
41      },
42      {
43        variant: "underline",
44        size: "md",
45        className: "px-1 h-13",
46      },
47      {
48        variant: "underline",
49        size: "lg",
50        className: "px-1 h-14",
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    "[&:-webkit-autofill]:bg-transparent",
66    "[&:-webkit-autofill:hover]:bg-transparent",
67    "[&:-webkit-autofill:focus]:bg-transparent",
68    "[&:-webkit-autofill:active]:bg-transparent",
69    "[&:-webkit-autofill]:[transition-delay:9999s]",
70  ),
71  {
72    variants: {
73      size: {
74        sm: "text-sm",
75        md: "text-sm",
76        lg: "text-md",
77      },
78    },
79    defaultVariants: {
80      size: "md",
81    },
82  },
83);
84 
85const labelVariants = cva(
86  cn(
87    "absolute left-0 top-1/2 -translate-y-1/2 origin-top-left pointer-events-none",
88    "text-accent-foreground/70",
89    "transition-all duration-200",
90    "group-data-[is-invalid=true]:text-destructive",
91  ),
92  {
93    variants: {
94      size: {
95// … truncated