自绘选择 Picker

<div class="xxd-picker" data-xxd-picker style="width:100%;max-width:220px">
  <button class="xxd-picker__trigger"><span class="xxd-picker__value"></span></button>
  <div class="xxd-listbox">
    <div class="xxd-option-group" role="group" aria-label="画质">
      <div class="xxd-option-group__label">画质</div>
      <div class="xxd-option" data-value="high" aria-selected="true"><span>高<small>2K，慢一点</small></span></div>
      <div class="xxd-option" data-value="standard"><span>标准<small>1K，最快</small></span></div>
    </div>
    <div class="xxd-option-group" role="group" aria-label="其他">
      <div class="xxd-option" data-value="auto">跟随会员计划</div>
      <div class="xxd-option" data-value="x" aria-disabled="true">4K（即将推出）</div>
    </div>
  </div>
</div>
<div class="xxd-picker" data-xxd-picker data-multiple data-placeholder="选择标签" style="width:100%;max-width:220px">
  <button class="xxd-picker__trigger"><span class="xxd-picker__value"></span></button>
  <div class="xxd-listbox">
    <div class="xxd-option" data-value="poster" aria-selected="true">海报</div>
    <div class="xxd-option" data-value="cover">封面</div>
    <div class="xxd-option" data-value="card">卡片</div>
  </div>
</div>

export function PickerDemo() {
  const [value, setValue] = useState<Quality | null>(qualities.pic[0]);
  return (
    <Select
      label="图片质量"
      className="w-56"
      value={value}
      onValueChange={(v) => setValue(v as Quality | null)}
      isItemEqualToValue={(a: Quality, b: Quality) => a.value === b.value}
      renderValue={(v: Quality | null) => v?.label ?? "请选择"}
    >
      <Select.Group>
        <Select.GroupLabel>画质</Select.GroupLabel>
        {qualities.pic.map((q) => (
          <Select.Option key={q.value} value={q}>{q.label}</Select.Option>
        ))}
      </Select.Group>
      <Select.Separator />
      <Select.Group>
        {qualities.other.map((q) => (
          <Select.Option key={q.value} value={q}>{q.label}</Select.Option>
        ))}
      </Select.Group>
    </Select>
  );
}