Checkbox & radio

export function Checkbox({ label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) {
  return (
    <label className="inline-flex cursor-pointer items-center gap-2 text-sm">
      <input
        type="checkbox"
        className="peer grid size-[18px] cursor-pointer appearance-none place-items-center rounded-sm border-[1.5px] border-border-strong bg-bg transition checked:border-primary checked:bg-primary"
        {...props}
      />
      {label}
    </label>
  );
}

export function Radio({ label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) {
  return (
    <label className="inline-flex cursor-pointer items-center gap-2 text-sm">
      <input
        type="radio"
        className="size-[18px] cursor-pointer appearance-none rounded-full border-[1.5px] border-border-strong bg-bg transition checked:border-[6px] checked:border-primary"
        {...props}
      />
      {label}
    </label>
  );
}