Input Group
任意組合表單元素橫排 joined。select+input、input+button、input+input 等。x-input 的 prefix/suffix/append 用於單一 input 中心組合，這個用於多個同等表單元素。`$c['addon']` 輔助類別可讓文字裝飾 span 對齊 addon 高度。
default 2 input pair (first + last name) — 同格 input を 2 つ joined
text addon — `https://` `$` `@` 等を addon class で渡す
https://
$
.00
select + input — country code + phone
input + button — search bar
size variants — sm / md / lg (child の `size` も合わせて渡すこと)
xs
sm
md
lg
error state — label/hint が text-error
Domain not recognised
使い方
{{-- 同格 input 2 つ --}}
<x-input-group label="Full name">
<x-input name="first" placeholder="First" />
<x-input name="last" placeholder="Last" />
</x-input-group>
{{-- addon class でテキスト装飾を渡す --}}
@php $c = SparrowhawkLabs\PinionUi\Compose\InputGroupComposer::compose([]); @endphp
<x-input-group label="Website">
<span class="{{ $c['addon'] }}">https://</span>
<x-input name="url" placeholder="example.com" />
</x-input-group>
{{-- select + input --}}
<x-input-group label="Phone">
<x-select name="country">
<option value="+81">JP +81</option>
<option value="+1">US +1</option>
</x-select>
<x-input type="tel" name="phone" />
</x-input-group>
{{-- input + submit button --}}
<x-input-group>
<x-input type="search" name="q" placeholder="Search…" />
<x-button type="submit" color="primary">Go</x-button>
</x-input-group>
{{-- size — wrapper と child の両方に size を揃える --}}
<x-input-group size="sm">
<x-input size="sm" placeholder="Compact" />
<x-button size="sm">Send</x-button>
</x-input-group>