Input

1import * as React from "react";
2import { Input as InputPrimitive } from "@base-ui/react/input";
3import { buttonVariants } from "@/registry/optics/button";
4import { cn } from "@/lib/utils";
5 
6function Input({ className = "", type = "text", variant, ...props }) {
7	return (
8		<InputPrimitive
9			type={type}
10			data-slot="input"
11			className={cn(
12				"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
13				variant &&
14					buttonVariants({
15						variant: variant,
16						animation: "colors",
17						className: "cursor-text",
18					}),
19				className,
20			)}
21			{...props}
22		/>
23	);
24}
25 
26Input.displayName = "Input";
27 
28export { Input };