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