Input

1import { cva, type VariantProps } from "class-variance-authority";
2import type * as React from "react";
3import { type MaterialAxisProps, type MaterialProps, materialSurface, splitAxisProps } from "@/lib/material";
4import { cn } from "@/lib/utils";
5 
6/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
7const inputVariants = cva("", {
8  variants: {
9    variant: {
10      default: "dark:bg-input/30 border-input bg-transparent shadow-xs",
11      glass: "",
12    },
13  },
14  defaultVariants: {
15    variant: "glass",
16  },
17});
18 
19/* Role: bordered adaptive glass at the small blur tier. */
20const ROLE: MaterialProps = {
21  border: true,
22  size: "sm",
23};
24 
25function Input({
26  className,
27  type,
28  variant = "glass",
29  icon,
30  error,
31  ...props
32}: React.ComponentProps<"input"> &
33  VariantProps<typeof inputVariants> &
34  MaterialAxisProps & {
35    /** Leading icon (folded from the glass wrapper). */
36    icon?: React.ReactNode;
37    /** Destructive border + focus ring (folded from the glass wrapper). */
38    error?: boolean;
39  }) {
40  const [axes, rest] = splitAxisProps(props);
41  const m = materialSurface(variant === "default" ? null : ROLE, axes);
42 
43  const input = (
44    <input
45      type={type}
46      data-slot="input"
47      data-material={m?.["data-material"]}
48      className={cn(
49        m?.className,
50        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
51        inputVariants({
52          variant,
53        }),
54        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
55        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
56        "transition duration-200 focus-visible:scale-[1.02]",
57        icon && "pl-10",
58        error && "border-destructive focus-visible:ring-destructive",
59        className,
60      )}
61      {...rest}
62    />
63  );
64 
65  if (icon) {
66    return (
67      <div className="relative">
68        <div className="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted-foreground">{icon}</div>
69        {input}
70      </div>
71    );
72  }
73 
74  return input;
75}
76 
77export { Input };