Checkbox

import { useState } from "react";
import { Checkbox } from "@arcadia/ui";

function Selection() {
  const [picked, setPicked] = useState<ReadonlySet<string>>(new Set([ROWS[0]!]));
  const all = picked.size === ROWS.length ? true : picked.size ? "mixed" : false;
  const flip = (r: string, on: boolean) => setPicked((p) => { const n = new Set(p); if (on) n.add(r); else n.delete(r); return n; });
  return (
    <>
      <Checkbox label="Select every chat" checked={all} onCheckedChange={(on) => setPicked(new Set(on ? ROWS : []))} />
      {ROWS.map((r) => <Checkbox key={r} label={`Select ${r}`} checked={picked.has(r)} onCheckedChange={(on) => flip(r, on)} />)}
      <span {...sx("cmp-result", cmp.result)}>{picked.size} selected</span>
    </>
  );
}