Input

1import * as React from "react";
2import { type VariantProps } from "class-variance-authority";
3 
4import { fieldVariants } from "@/components/ui/recipes";
5import { cn } from "@/lib/utils";
6 
7export interface InputProps
8  extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof fieldVariants> {}
9 
10const Input = React.forwardRef<HTMLInputElement, InputProps>(
11  ({ className, radius, type, variant, ...props }, ref) => (
12    <input
13      ref={ref}
14      type={type}
15      data-slot="input"
16      data-variant={variant ?? "default"}
17      data-radius={radius ?? "md"}
18      data-invalid={props["aria-invalid"] ? "" : undefined}
19      className={cn(
20        fieldVariants({ variant, radius }),
21        "h-10 px-3 py-2 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-primary",
22        className,
23      )}
24      {...props}
25    />
26  ),
27);
28Input.displayName = "Input";
29 
30export type InputGroupProps = React.HTMLAttributes<HTMLDivElement> &
31  VariantProps<typeof fieldVariants>;
32 
33const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
34  ({ className, radius, variant, ...props }, ref) => (
35    <div
36      ref={ref}
37      data-slot="input-group"
38      data-variant={variant ?? "default"}
39      data-radius={radius ?? "md"}
40      aria-invalid={props["aria-invalid"]}
41      className={cn(
42        fieldVariants({ variant, radius }),
43        "group h-10 items-center overflow-hidden p-0 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/20 has-[[aria-invalid=true]]:border-invalid has-[[aria-invalid=true]]:ring-invalid/15 [&_[data-slot=input]]:h-full [&_[data-slot=input]]:rounded-none [&_[data-slot=input]]:border-0 [&_[data-slot=input]]:bg-transparent [&_[data-slot=input]]:shadow-none [&_[data-slot=input]]:outline-none [&_[data-slot=input]]:ring-0 [&_[data-slot=input]]:ring-offset-0",
44        className,
45      )}
46      {...props}
47    />
48  ),
49);
50InputGroup.displayName = "InputGroup";
51 
52type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement> & {
53  position?: "start" | "end";
54};
55 
56function InputGroupAddon({ className, position = "start", ...props }: InputGroupAddonProps) {
57  return (
58    <div
59      data-slot="input-group-addon"
60      data-position={position}
61      className={cn(
62        "flex h-full shrink-0 items-center justify-center px-3 text-muted-foreground [&_svg]:size-4",
63        position === "start" ? "border-r border-border" : "border-l border-border",
64        className,
65      )}
66// … truncated