Input group

<div role="group" data-slot="input-group" {{ attributes.cn(
    "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 dark:bg-input/30",
    "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",
    "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>textarea]:h-auto",
    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
) }}>{{ slot }}</div>

@props({'type': 'text'})
<input type="{{ type }}" data-slot="input-group-control" {{ attributes.cn("h-full w-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-3 py-1 text-base shadow-none outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm") }} />

<textarea data-slot="input-group-control" {{ attributes.cn("field-sizing-content min-h-16 w-full flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-2.5 text-base shadow-none outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm") }}>{{ slot }}</textarea>

@props({'align': 'inline-start'})
<div role="group" data-slot="input-group-addon" data-align="{{ align }}" x-data x-on:click="$event.target.closest('button') || $el.parentElement.querySelector('[data-slot=input-group-control]')?.focus()" {{ attributes.cn(
    "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
    {
        'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem]',
        'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem]',
        'block-start': 'order-first w-full justify-start px-3 pt-3',
        'block-end': 'order-last w-full justify-start px-3 pb-3',
    }[align],
) }}>{{ slot }}</div>

@props({'variant': 'ghost', 'size': 'xs', 'type': 'button'})
<button type="{{ type }}" data-slot="input-group-button" {{ attributes.cn(
    "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap shadow-none transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
    {
        'ghost': 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        'secondary': 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        'default': 'bg-primary text-primary-foreground hover:bg-primary/90',
        'outline': 'border bg-background hover:bg-accent',
    }[variant],
    {
        'xs': "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
        'sm': 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
        'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
    }[size],
) }}>{{ slot }}</button>

<span data-slot="input-group-text" {{ attributes.cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4") }}>{{ slot }}</span>