Label Input

1"use client";
2 
3import React, { useState } from "react";
4import { cn } from "@/lib/utils";
5import { EyeIcon, EyeOffIcon } from "lucide-react";
6 
7type RingColor =
8  | "muted"
9  | "primary"
10  | "secondary"
11  | "destructive"
12  | "red"
13  | "blue"
14  | "green"
15  | "yellow"
16  | "purple"
17  | "pink"
18  | "orange"
19  | "cyan"
20  | "indigo"
21  | "violet"
22  | "rose"
23  | "amber"
24  | "lime"
25  | "emerald"
26  | "sky"
27  | "slate"
28  | "fuchsia";
29 
30interface LabelInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
31  label?: string;
32  ringColor?: RingColor;
33  containerClassName?: string;
34}
35 
36const ringColorMap: Record<RingColor, string> = {
37  muted: "focus:ring-muted",
38  primary: "focus:ring-primary",
39  secondary: "focus:ring-secondary",
40  destructive: "focus:ring-destructive",
41  red: "focus:ring-red-600",
42  blue: "focus:ring-blue-600",
43  green: "focus:ring-green-600",
44  yellow: "focus:ring-yellow-600",
45  purple: "focus:ring-purple-600",
46  pink: "focus:ring-pink-600",
47  orange: "focus:ring-orange-600",
48  cyan: "focus:ring-cyan-600",
49  indigo: "focus:ring-indigo-600",
50  violet: "focus:ring-violet-600",
51  rose: "focus:ring-rose-600",
52  amber: "focus:ring-amber-600",
53  lime: "focus:ring-lime-600",
54  emerald: "focus:ring-emerald-600",
55  sky: "focus:ring-sky-600",
56  slate: "focus:ring-slate-600",
57  fuchsia: "focus:ring-fuchsia-600",
58};
59 
60export function LabelInput({
61  label = "",
62  ringColor = "muted",
63  containerClassName,
64  className,
65  type = "text",
66  placeholder = "",
67  ...props
68}: LabelInputProps) {
69  const [isVisible, setIsVisible] = useState(false);
70  const isPasswordType = type === "password";
71  const inputType = isPasswordType ? (isVisible ? "text" : "password") : type;
72 
73  const toggleVisibility = () => setIsVisible(!isVisible);
74 
75  return (
76    <div className={cn("group relative w-full", className, containerClassName)}>
77      <input
78        className={cn(
79          "block outline-none peer text-primary w-full px-3.5 h-10 text-sm rounded-lg border focus:ring-2 dark:bg-neutral-950 dark:border-neutral-700/75 autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)]",
80          isPasswordType && "pr-9",
81          ringColorMap[ringColor],
82        )}
83        placeholder={placeholder}
84        type={inputType}
85        {...props}
86      />
87// … truncated