| 9 | import { Textarea } from "@/components/ui/textarea" |
| 10 | |
| 11 | function InputGroup({ className, ...props }: React.ComponentProps<"div">) { |
| 12 | return ( |
| 13 | <div |
| 14 | data-slot="input-group" |
| 15 | role="group" |
| 16 | className={cn( |
| 17 | "group/input-group border-input bg-background relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none", |
| 18 | "h-9 min-w-0 has-[>textarea]:h-auto", |
| 19 | |
| 20 | // Variants based on alignment. |
| 21 | "has-[>[data-align=inline-start]]:[&>input]:pl-2", |
| 22 | "has-[>[data-align=inline-end]]:[&>input]:pr-2", |
| 23 | "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", |
| 24 | "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", |
| 25 | |
| 26 | // Focus state. |
| 27 | "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", |
| 28 | |
| 29 | // Error state. |
| 30 | "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", |
| 31 | |
| 32 | className |
| 33 | )} |
| 34 | {...props} |
| 35 | /> |
| 36 | ) |
| 37 | } |
| 38 | |
| 39 | const inputGroupAddonVariants = cva( |
| 40 | "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", |