Tabs and lists

<Tabs
  ariaLabel="Editor tabs"
  value={tabView}
  options={options.map((option) => ({
    ...option,
    id: `tab-${option.value}`,
    ariaControls: `panel-${option.value}`,
  }))}
  onChange={setTabView}
/>
{options.map((option) => (
  <TabPanel
    id={`panel-${option.value}`}
    labelledBy={`tab-${option.value}`}
    active={tabView === option.value}
  >
    {option.label} content
  </TabPanel>
))}

<Listbox label="Items" onSelect={setView}>
  {[
    { value: 'table', label: 'Table' },
    { value: 'board', label: 'Board' },
    { value: 'calendar', label: 'Calendar', disabled: true },
  ].map((option) => (
    <ListboxOption
      key={option.value}
      value={option.value}
      selected={view === option.value}
      disabled={option.disabled}
      onClick={() => setView(option.value)}
    >
      {option.label}
    </ListboxOption>
  ))}
</Listbox>
<div class="catalog-icon-lists">
  <Listbox label="Value formats" onSelect={setFormat}>
    {[
      {
        value: 'automatic',
        label: 'Automatic',
        description: 'No specific format',
        icon: sliders,
      },
      {
        value: 'number',
        label: 'Number',
        description: '1,000.12',
        icon: numberIcon,
      },
    ].map((option) => (
      <ListboxOption
        key={option.value}
        value={option.value}
        selected={format === option.value}
        onClick={() => setFormat(option.value)}
        label={option.label}
        description={option.description}
        icon={<SvgIcon svg={option.icon} />}
      />
    ))}
  </Listbox>
  <Listbox label="Visual formats" onSelect={setVisual}>
    <ListboxOption
      value="none"
      selected={visual === 'none'}
      onClick={() => setVisual('none')}
      label="None"
      icon={<SvgIcon svg={sliders} />}
    />
    <ListboxGroup label="Identity">
      <ListboxOption
        value="avatar"
        selected={visual === 'avatar'}
        onClick={() => setVisual('avatar')}
        label="Avatar with text"
        icon={<SvgIcon svg={userIcon} />}
      />
    </ListboxGroup>
  </Listbox>
</div>