Input Group

<?php

use Lib\PHPXUI\{
    InputGroup,
    InputGroupInput,
    InputGroupAddon,
    InputGroupButton,
    InputGroupText,
    InputGroupTextarea,
    Tooltip,
    TooltipTrigger,
    TooltipContent,
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem,
    Separator
};

?>

<div class="grid w-full max-w-sm gap-6">
    <h1 class="text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
        Input Group
    </h1>
    <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
            <Search />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
            12 results
        </InputGroupAddon>
    </InputGroup>
    <InputGroup>
        <InputGroupInput placeholder="example.com" class="pl-1!" />
        <InputGroupAddon>
            <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
            <Tooltip>
                <TooltipTrigger asChild="true">
                    <InputGroupButton class="rounded-full" size="icon-xs">
                        <Info />
                    </InputGroupButton>
                </TooltipTrigger>
                <TooltipContent>
                    This is content in a tooltip.
                </TooltipContent>
            </Tooltip>
        </InputGroupAddon>
    </InputGroup>
    <InputGroup>
        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
        <InputGroupAddon align="block-end">
            <InputGroupButton variant="outline" class="rounded-full" size="icon-xs">
                <Plus />
            </InputGroupButton>
            <DropdownMenu>
                <DropdownMenuTrigger asChild="true">
                    <InputGroupButton variant="ghost">Auto</InputGroupButton>
                </DropdownMenuTrigger>
                <DropdownMenuContent side="top" align="start" class="[--radius:0.95rem]">
                    <DropdownMenuItem>Auto</DropdownMenuItem>
                    <DropdownMenuItem>Agent</DropdownMenuItem>
                    <DropdownMenuItem>Manual</DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <InputGroupText class="ml-auto">52% used</InputGroupText>
            <Separator orientation="vertical" class="h-4!" />
            <InputGroupButton
                variant="default"
                class="rounded-full"
                size="icon-xs"
                disabled="true"
            >
                <ArrowUp />
                <span class="sr-only">Send</span>
            </InputGroupButton>
        </InputGroupAddon>
    </InputGroup>
    <InputGroup>
        <InputGroupInput placeholder="@shadcn" />
        <InputGroupAddon align="inline-end">
            <div class="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
                <Check class="size-3" />
            </div>
        </InputGroupAddon>
    </InputGroup>
</div>