Input Group

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="input-group"
9      className={cn(
10        "group/input-group relative flex min-h-11.5 w-full min-w-0 items-center overflow-hidden rounded-xl border [background:var(--control-background)] [border-color:var(--control-border)] [box-shadow:var(--control-shadow)] transition-[border-color,box-shadow,background-color] duration-300 ease-[cubic-bezier(.16,1,.3,1)] hover:[background:var(--control-background-hover)] hover:[border-color:var(--control-border-hover)] hover:[box-shadow:var(--control-shadow-hover)] focus-within:[background:var(--control-background)] focus-within:[border-color:var(--control-focus-border)] focus-within:[box-shadow:var(--control-focus-shadow)] has-[[aria-invalid=true]]:![border-color:color-mix(in_oklch,var(--destructive)_55%,transparent)] has-[[data-align=block-start]]:flex-wrap has-[[data-align=block-end]]:flex-wrap",
11        className,
12      )}
13      {...props}
14    />
15  );
16}
17 
18function InputGroupAddon({
19  className,
20  align = "inline-start",
21  ...props
22}: React.ComponentProps<"div"> & {
23  align?: "inline-start" | "inline-end" | "block-start" | "block-end";
24}) {
25  return (
26    <div
27      data-slot="input-group-addon"
28      data-align={align}
29      className={cn(
30        "flex shrink-0 items-center gap-2 px-3 text-sm text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 data-[align=inline-end]:order-last data-[align=block-start]:w-full data-[align=block-start]:border-b data-[align=block-start]:border-foreground/8 data-[align=block-end]:order-last data-[align=block-end]:w-full data-[align=block-end]:border-t data-[align=block-end]:border-foreground/8",
31        className,
32      )}
33      {...props}
34    />
35  );
36}
37 
38function InputGroupInput({
39  className,
40  ...props
41}: React.ComponentProps<"input">) {
42  return (
43    <input
44      data-slot="input-group-control"
45      className={cn(
46        "h-11.5 min-w-0 flex-1 bg-transparent px-1 text-sm font-medium text-foreground outline-none placeholder:font-normal placeholder:text-muted-foreground/70 first:pl-4 last:pr-4 disabled:cursor-not-allowed disabled:opacity-45",
47        className,
48      )}
49      {...props}
50    />
51  );
52}
53 
54function InputGroupTextarea({
55  className,
56  ...props
57}: React.ComponentProps<"textarea">) {
58  return (
59    <textarea
60      data-slot="input-group-control"
61      className={cn(
62// … truncated