Input

1import { Input } from "@/components/ui/input";
2
3<Input />

1"use client";
2
3import { FieldInput } from "@ark-ui/react/field";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7
8export const inputVariants = tv({
9  base: [
10    "peer",
11    "w-full min-w-0",
12    "px-3",
13    "bg-transparent dark:bg-input/30",
14    "text-base md:text-sm",
15    "rounded-lg border border-input shadow-xs/5",
16    "placeholder:text-muted-foreground/64",
17    "file:inline-flex file:h-7 file:items-center file:border-0",
18    "file:font-medium file:text-foreground file:text-sm",
19    "transition-[color,box-shadow]",
20    "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/32",
21    "aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
22    "data-invalid:border-destructive data-invalid:text-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
23    "dark:aria-invalid:border-destructive-foreground dark:aria-invalid:text-destructive-foreground dark:aria-invalid:ring-destructive-foreground/40",
24    "dark:data-invalid:border-destructive-foreground dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-destructive-foreground/40",
25    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64",
26    "motion-reduce:transition-none!",
27  ],
28  variants: {