input-group

1'use client';
2 
3import * as React from 'react';
4import { cva, type VariantProps } from 'class-variance-authority';
5 
6import { cn } from '@/registry/lib/utils';
7import { Button } from '@/registry/ui/button';
8import { Input } from '@/registry/ui/input';
9import { Textarea } from '@/registry/ui/textarea';
10 
11function 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 relative flex h-9 w-full min-w-0 overflow-hidden items-center rounded-dynamic border border-line-ui transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-ui/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:outline-focus has-[[data-slot][aria-invalid=true]]:border-(--destructive-fill) has-[[data-slot][aria-invalid=true]]:outline-2 has-[[data-slot][aria-invalid=true]]:outline-(--destructive-fill) 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 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',
18        className
19      )}
20      {...props}
21    />
22  );
23}
24 
25const inputGroupAddonVariants = cva(
26  "flex h-full cursor-text items-center justify-center gap-2 text-sm font-medium text-muted select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-xs [&>svg:not([class*='size-'])]:size-4",
27  {
28    variants: {
29      align: {
30        'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
31        'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
32        'block-start':
33          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
34        'block-end':
35          'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
36      },
37      variant: {
38        ghost: '',
39        surface: 'bg-ui',
40      },
41    },
42    compoundVariants: [
43      {
44        align: 'inline-start',
45// … truncated