input-group

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/input-group/InputGroup.astro directly.
3/**
4 * @component InputGroup
5 * @title Input Group
6 * @description An input field with attached addons like icons, buttons, or text labels.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-20918&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <div class="grid w-full max-w-sm gap-6">
12 *   <InputGroup>
13 *     <InputGroupInput placeholder="Search..." />
14 *     <InputGroupAddon>
15 *       <SearchIcon />
16 *     </InputGroupAddon>
17 *     <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
18 *   </InputGroup>
19 *
20 *   <InputGroup>
21 *     <InputGroupInput placeholder="example.com" />
22 *     <InputGroupAddon>
23 *       <InputGroupText>https://</InputGroupText>
24 *     </InputGroupAddon>
25 *     <InputGroupAddon align="inline-end">
26 *       <InputGroupButton size="xs">Check</InputGroupButton>
27 *     </InputGroupAddon>
28 *   </InputGroup>
29 *
30 *   <InputGroup>
31 *     <InputGroupTextarea placeholder="Ask, Search or Chat..." />
32 *     <InputGroupAddon align="block-end">
33 *       <InputGroupButton size="icon-xs" class="rounded-full">
34 *         <PlusIcon />
35 *       </InputGroupButton>
36 *       <InputGroupButton variant="ghost">Auto</InputGroupButton>
37 *       <InputGroupText class="ml-auto">52% used</InputGroupText>
38 *       <Separator orientation="vertical" class="!h-4" />
39 *       <InputGroupButton size="icon-xs" variant="default" class="rounded-full">
40 *         <ArrowUpIcon />
41 *         <span class="sr-only">Send</span>
42 *       </InputGroupButton>
43 *     </InputGroupAddon>
44 *   </InputGroup>
45 * </div>
46 *
47 * @usage
48 *
49 * ```astro nocollapse
50 * ---
51 * import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from '@bejamas/ui/components/input-group';
52 * ---
53 *
54 * <InputGroup>
55 *   <InputGroupInput placeholder="Search..." />
56 *   <InputGroupAddon><SearchIcon /></InputGroupAddon>
57 * </InputGroup>
58 * ```
59 *
60 * @examples
61 *
62 * ### Sizes
63 *
64 * <div class="grid w-full max-w-sm gap-3">
65 *   <InputGroup size="sm">
66 *     <InputGroupInput placeholder="Small (h-8)" />
67 *   </InputGroup>
68 *   <InputGroup>
69 *     <InputGroupInput placeholder="Default (h-9)" />
70 *   </InputGroup>
71 *   <InputGroup size="lg">
72 *     <InputGroupInput placeholder="Large (h-10)" />
73 *   </InputGroup>
74 * </div>
75 *
76 * @api
77 *
78 * | Prop | Type | Default |
79 * | --- | --- | --- |
80// … truncated