input

1/**
2 * Slots: input
3 */
4 
5import * as React from 'react';
6import { Input as InputPrimitive } from '@base-ui/react/input';
7import { cva, type VariantProps } from 'class-variance-authority';
8 
9import { cn } from '@/registry/lib/utils';
10 
11const inputVariants = cva(
12  [
13    'h-9 w-full min-w-0 rounded-dynamic px-3 py-1 text-sm text-primary outline-none transition-colors',
14    'placeholder:text-muted',
15    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
16    'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-primary',
17    'focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-0',
18    'aria-invalid:border-[var(--destructive-fill)] aria-invalid:focus-visible:outline-[var(--destructive-fill)]',
19  ],
20  {
21    variants: {
22      variant: {
23        surface: 'border border-line-ui focus-visible:border-focus-fill',
24        outline: 'border border-line-ui shadow-2xs focus-visible:border-focus-fill',
25        soft: 'border border-transparent focus-visible:border-focus-fill',
26      },
27    },
28    defaultVariants: {
29      variant: 'surface',
30    },
31  }
32);
33 
34function Input({
35  className,
36  type,
37  variant = 'surface',
38  ...props
39}: InputPrimitive.Props & VariantProps<typeof inputVariants>) {
40  return (
41    <InputPrimitive
42      type={type}
43      data-slot="input"
44      data-variant={variant}
45      className={cn(inputVariants({ variant, className }))}
46      {...props}
47    />
48  );
49}
50 
51export { Input, inputVariants };