Checkbox

let granted = new Set(["read"]);

function toggle(value: string, checked: boolean) {
	if (checked) granted.add(value);
	else granted.delete(value);
	void handle.update();
}

<div mix={[vstack({ gap: 3, align: "stretch" })]}>
	<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>Token scopes</span>

	<Checkbox
		checked={granted.size === SCOPES.length}
		indeterminate={granted.size > 0 && granted.size < SCOPES.length}
		aria-checked={granted.size === SCOPES.length ? "true" : "mixed"}
		mix={[
			ariaChecked(),
			on<HTMLInputElement, "change">("change", (event) => {
				granted = event.currentTarget.checked
					? new Set(SCOPES.map((scope) => scope.value))
					: new Set();
				void handle.update();
			}),
		]}
	>
		<span mix={[weight("medium")]}>Grant every scope</span>
	</Checkbox>

	<Separator />

	{SCOPES.map((scope) => (
		<Checkbox
			key={scope.value}
			name="scopes"
			value={scope.value}
			checked={granted.has(scope.value)}
			color={scope.value === "secrets" ? "danger" : "brand"}
			mix={[
				ariaChecked(),
				on<HTMLInputElement, "change">("change", (event) =>
					toggle(scope.value, event.currentTarget.checked),
				),
			]}
		>
			<span mix={[vstack({ gap: 0, align: "start" })]}>
				<span mix={[text("sm")]}>{scope.label}</span>
				<span mix={[text("xs"), fg("neutral")]}>{scope.hint}</span>
			</span>
		</Checkbox>
	))}

	<p mix={[pis(7), text("sm"), fg("neutral")]}>
		{granted.size} of {SCOPES.length} scopes granted
	</p>
</div>