Toolbar Component

@* Toolbar inputs use Size="sm" to read as a compact filter bar *@
<Toolbar>
    <LeftZone>
        <InputField Placeholder="Search" @bind-Value="searchText">
            <LeadingIcon><svg>...search...</svg></LeadingIcon>
        </InputField>
        <Dropdown Size="sm" Placeholder="Status"
                  Items="statusItems"
                  @bind-SelectedValue="selectedStatus" />
        <DatePickerDropdown Placeholder="Date" />
    </LeftZone>
</Toolbar>

<Toolbar>
    <LeftZone>
        <InputField Placeholder="Search patients..." @bind-Value="searchText" />
        <Dropdown Size="sm" Placeholder="Department" Items="departmentItems" />
    </LeftZone>
    <RightZone>
        <Button Variant="secondary" Size="sm" Text="Export" />
        <Button Variant="primary"   Size="sm" Text="Add Patient" />
    </RightZone>
</Toolbar>

<Toolbar>
    <LeftZone>
        <InputField Placeholder="Search..." />
        <Dropdown Size="sm" Placeholder="Status" Items="statusItems" />
        <Dropdown Size="sm" Placeholder="Department" Items="departmentItems" />
        <DatePickerDropdown Placeholder="Date range" />
    </LeftZone>
    <RightZone>
        <Button Variant="secondary" Size="sm" Text="Export" />
        <Button Variant="secondary" Size="sm" Text="Import" />
        <Button Variant="primary"   Size="sm" Text="Create" />
    </RightZone>
</Toolbar>

<Toolbar>
    <LeftZone>
        <FilterButtonGroup Buttons="_toolbarFilters"
                           @bind-ActiveKey="_toolbarActiveFilter" />
        <InputField Placeholder="Search..." @bind-Value="searchText" />
    </LeftZone>
    <RightZone>
        <Button Variant="secondary" Size="sm" Text="Export" />
        <Button Variant="primary"   Size="sm" Text="Create" />
    </RightZone>
</Toolbar>

@code {
    private string? _toolbarActiveFilter;
    private List<FilterButtonGroup.FilterButtonItem> _toolbarFilters = new()
    {
        new() { Key = "all",     Label = "All",     Count = 248 },
        new() { Key = "open",    Label = "Open",    Count = 124 },
        new() { Key = "pending", Label = "Pending", Count = 67 },
        new() { Key = "closed",  Label = "Closed",  Count = 57 },
    };
}

@* No LeftZone/RightZone — all content flows inline *@
<Toolbar>
    <InputField Placeholder="Quick search..." />
    <Button Variant="secondary" Size="sm" Text="Filter" />
    <Button Variant="primary"   Size="sm" Text="Add New" />
</Toolbar>

@* Divider between toolbar and content below *@
<Toolbar ShowDivider="true">...</Toolbar>

@* Card-like bordered container *@
<Toolbar Bordered="true">...</Toolbar>

Toolbar Component

Basic

With actions

Full toolbar

With filter buttons

Simple (ChildContent)

Divider & bordered