One value with clear, several as chips

// apps/docs/examples/ui/combobox.tsx'use client';
import {useState} from 'react';
import {  Combobox,  ComboboxChip,  ComboboxChips,  ComboboxChipsInput,  ComboboxContent,  ComboboxEmpty,  ComboboxInput,  ComboboxItem,  ComboboxList,  ComboboxValue,  useComboboxAnchor,} from '@workspace/active-ui/components/primitives/combobox';import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';
// A fixed list; a list from a server belongs in AsyncCombobox.const CITIES = [  'Amsterdam',  'Antwerp',  'Berlin',  'Brussels',  'Copenhagen',  'Dublin',  'Lisbon',  'Madrid',  'Paris',  'Rotterdam',  'Utrecht',  'Vienna',];
/** * Type to filter a list, then choose: one value in an input with a clear * button, and several values as chips in one field. `items` is the full * list; the combobox filters it as you type and renders the matches through * the function child of `ComboboxList`. */export default function ComboboxExample() {  const [city, setCity] = useState<string | null>(null);  const [offices, setOffices] = useState<string[]>(['Utrecht']);  const anchor = useComboboxAnchor();  return (    <div className="grid w-full max-w-sm gap-8">      <Field>        <FieldLabel htmlFor="combobox-city">Head office</FieldLabel>        <Combobox items={CITIES} value={city} onValueChange={setCity}>          <ComboboxInput            id="combobox-city"            placeholder="Search a city"            triggerLabel="Show cities"            showClear            clearLabel="Clear head office"          />          <ComboboxContent>            <ComboboxEmpty>No city matches.</ComboboxEmpty>            <ComboboxList>              {(item: string) => (                <ComboboxItem key={item} value={item}>                  {item}                </ComboboxItem>              )}            </ComboboxList>          </ComboboxContent>        </Combobox>        <FieldDescription>Value: {city ?? 'none'}</FieldDescription>      </Field>
      <Field>        <FieldLabel htmlFor="combobox-offices">Branch offices</FieldLabel>        <Combobox          items={CITIES}          multiple          value={offices}          onValueChange={setOffices}        >          <ComboboxChips ref={anchor}>            <ComboboxValue>              {(values: string[]) =>                values.map((value) => (                  <ComboboxChip key={value} removeLabel={`Remove ${value}`}>                    {value}                  </ComboboxChip>                ))              }            </ComboboxValue>            <ComboboxChipsInput              id="combobox-offices"              placeholder={offices.length ? '' : 'Add a city'}            />          </ComboboxChips>          <ComboboxContent anchor={anchor}>            <ComboboxEmpty>No city matches.</ComboboxEmpty>            <ComboboxList>              {(item: string) => (                <ComboboxItem key={item} value={item}>                  {item}                </ComboboxItem>              )}            </ComboboxList>          </ComboboxContent>        </Combobox>        <FieldDescription>{offices.length} chosen</FieldDescription>      </Field>    </div>  );}