Input

import * as React from "react";
import { Input as InputPrimitive } from "@base-ui/react/input";
import { buttonVariants } from "@/registry/optics/button";
import { cn } from "@/lib/utils";

function Input({ className = "", type = "text", variant, ...props }) {
	return (
		<InputPrimitive
			type={type}
			data-slot="input"
			className={cn(
				"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",
				variant &&
					buttonVariants({
						variant: variant,
						animation: "colors",
						className: "cursor-text",
					}),
				className,
			)}
			{...props}
		/>
	);
}

export { Input };