Filter bar

The top of a list page. Picker, search and period, then a small toolbar.

import { FilterBar, Input, Select } from "@openperf/deft";

import { Preview } from "../../src/Preview";

const OPTIONS = [
  { value: "option-1", label: "Option 1" },
  { value: "option-2", label: "Option 2" },
];

const ITEMS = OPTIONS.map((option) => (
  <Select.Item key={option.value} value={option.value}>
    {option.label}
  </Select.Item>
));

export default function FilterBarBasic() {
  return (
    <Preview block={true}>
      <FilterBar.Root>
        <FilterBar.Controls>
          <Select.Root defaultValue="option-1" items={OPTIONS}>
            <Select.Trigger />
            <Select.Content>{ITEMS}</Select.Content>
          </Select.Root>
          <Input.Root aria-label="Search" placeholder="Search" type="search" />
          <Select.Root defaultValue="option-1" items={OPTIONS}>
            <Select.Trigger />
            <Select.Content>{ITEMS}</Select.Content>
          </Select.Root>
        </FilterBar.Controls>
        <FilterBar.Toolbar>
          <FilterBar.Count>12 items</FilterBar.Count>
          Label
          <Select.Root defaultValue="option-1" items={OPTIONS}>
            <Select.Trigger size="inline" variant="ghost" />
            <Select.Content>{ITEMS}</Select.Content>
          </Select.Root>
        </FilterBar.Toolbar>
      </FilterBar.Root>
    </Preview>
  );
}

FilterBar.Controls holds the picker, search and period on one line. The search Input takes the free width; the row wraps when it runs out of room.
FilterBar.Toolbar is the line below, in small muted text. It starts with FilterBar.Count and uses inline ghost selects and sm Dots inside the text.
No page title above and no tabs below.

API

Parts: Root, Controls, Count, Toolbar. Other props go to the native element: div for Root, Controls and Toolbar, span for Count.