input-group

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import { Input } from "@/components/ui/input"
9import { Textarea } from "@/components/ui/textarea"
10 
11type InputGroupSize = "xs" | "sm" | "default" | "lg" | "xl" | "2xl"
12 
13const InputGroupSizeContext = React.createContext<InputGroupSize>("default")
14 
15function InputGroup({
16  className,
17  size = "default",
18  ...props
19}: React.ComponentProps<"div"> & { size?: InputGroupSize }) {
20  return (
21    <InputGroupSizeContext.Provider value={size}>
22      <div
23        data-slot="input-group"
24        data-size={size}
25        role="group"
26        className={cn(
27          "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 data-[size=lg]:h-10 data-[size=sm]:h-8 data-[size=xs]:h-6 data-[size=xl]:h-11 data-[size=xl]:rounded-lg data-[size=2xl]:h-13 data-[size=2xl]:rounded-xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto! has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto! has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto! dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
28          className
29        )}
30        {...props}
31      />
32    </InputGroupSizeContext.Provider>
33  )
34}
35 
36const inputGroupAddonVariants = cva(
37// … truncated